使用json结果在jquery对话框中填充表

时间:2014-12-09 17:44:42

标签: php jquery json

当用户单击按钮查看注释时,将打开一个带有注释列表的jquery对话框。我无法弄清楚如何在成功的基础上填充表格。我发现一些帖子说使用.append(在我的代码中),但它不适合我,我不知道我错过了什么。

PHP代码:

if(isset($_GET['parcel_id'])) {
    $db = new ezSQL_mysql(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);
    $comments = $db->get_results("SELECT * FROM comments where parcel_id=" . $_GET['parcel_id']);
    if($comments != null) echo json_encode($comments);

    /*foreach ($comments as $comment){
        echo "<table><tr><td>" . $comment->date_created . "</td><td style=\"text-align:right;\">" . $comment->user_id . "</td></tr>";
        echo "<tr><td colspan=\"2\">" . $comment->comment . "</td></tr></table>";
    }*/
}

jQuery代码:

    $('#ViewComments').click(function() {
        $("#InsertComment").focus();
        //view/add comments dialog
        $( "#CommentsDialog" ).dialog({
            height:320,
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
        var parcel_id = $('#ParcelId').val(parcel_id);
        $.ajax({
            url: "classes/get-comments.php?parcel_id=" + parcel_id,
            type: "GET",
            data: { parcel_id : parcel_id },
            error: function(SMLHttpRequest, textStatus, errorThrown){
                    alert("An error has occurred making the request: " + errorThrown);
            },
            success: function(comments){
                //do stuff here on success
                //<div id="Comments"><table id="CommentResults">
                var tr;
                for(var i=0; i < comments.length; i++){
                    tr = $('<tr/>');
                    tr.append("<td>" + json[i].date_create + "</td>");
                    tr.append("<td style=\"text-align:right;\">" + json[i].user_id + "</td></tr>");
                    tr.append("<tr><td colspan=\"2\">" + json[i].comment + "</td>");
                    $('#CommentResults').append(tr);
                }
            }
        });
    });//end view comments click function

HTML:

    <div id="CommentsDialog" title="Comments">
        <div style="width:98%;height:75%; margin-bottom:5px; background-color: #fff; padding:5px;" id="Comments" name="Comments">
            <table id="CommentResults" name="CommentResults"></table>               
        </div>
        <input type="text" style="width:65%;margin-top:5px;" id="InsertComment" /> <input type="button" id="AddComment" value="Add Comment" class="floatRight" />
        </form>
    </div>

0 个答案:

没有答案