如何使用 mysql 数据弹出 jquery 对话框？

Question

我有一个关于 jQuery UI 对话框和显示来自数据库的动态内容的问题。

这里我有一个使用 php 和 mysql 生成博客文章的表，在该表中，有一个列可以查看属于每个博客文章的内容。

那个链接是这样的 -

    $html .= "  <td align='center'>\n";
    $html .= "      <a href='#' id='blog-$blog_id' class='view' >\n";
    $html .= "          <span class='icon-small ico-view-blog' title='View This Blog Post'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";

点击上面的链接，我需要弹出一个 jQuery 对话框来显示所有博客内容。例如：博客标题、作者、图片、博客等。

我尝试使用 jQuery 并使用单独的 php 脚本来获取这样的博客内容。但它并没有像我预期的那样弹出对话框。

这是我用于对话框的 jQuery -

$( "#dialog-view-blog" ).dialog({
        autoOpen: false,
        height: 450,
        width: 650,
        modal: true,
        buttons: {
            Cancel: function() {
            $( this ).dialog( "close" );
            }
        }, 
        position: { 
            my: "center top", 
            at: "center top",
            of: "#content"
        }
    });

这就是我如何从 php 文件发送数据的 ajax 请求以更新对话框中的内容 -

$( "a.view" ).click(function(e) {
    e.preventDefault();     
    var clickblogID = this.id.split('-'); //Split string 
    var DbNumberID = clickedID[1]; //and get number from array
    var blogId = 'blog_id='+ DbNumberID; //build a post data structure  
    $.ajax({
        url: 'update_blog.php',
        type: 'POST',
        data: blogId,
        success: function(data){

            //alert(data);

            //construct the data however, update the HTML of the popup div 
            //$('#dialog-view-blog').html(data);
            $('#dialog-view-blog').dialog('open');
        }
    });             
}); 

来自我的 PHP 页面 -

<?php
// define constant for upload folder
define('UPLOAD_DIR', '../upload_images/blog/'); 


echo '<pre>', print_r($_GET).'</pre>';

if (isset($_GET['blog_id'])) { 
    //blog_id 
    $blogId = $_GET['blog_id'];

    //echo $blogID;

    // If there is no any blog to this user display a string. 
    $q = "SELECT * FROM userblogs WHERE blog_id = ? LIMIT 1";
    // Prepare the statement:
    $stmt = mysqli_prepare($dbc, $q);
    // Bind the variables:
    mysqli_stmt_bind_param($stmt, 'i', $blogId);                            
    // Execute the query:
    mysqli_stmt_execute($stmt);
    //store result  
    mysqli_stmt_store_result($stmt); 
    // Get the number of rows returned: 
    $rows = mysqli_stmt_num_rows ($stmt);

    if ( $rows == 1 ) { 

        // bind variables to prepared statement
        mysqli_stmt_bind_result($stmt, $blog_id, $user_id, $blog_title, $blog_author, $blog, $blog_image, $blog_added_date, $blog_date_modified);

        $viewBlog  = "<div id='dialog-view-blog' title='View Blogs'>\n";
        $viewBlog .= "      <h2>$blog_title</h2>\n";
        $viewBlog .= "  <p>$blog_author | $blog_added_date</p>\n";
        $viewBlog .= "  <p>";
        $viewBlog .= "          <img src='".UPLOAD_DIR.$userName."/".$blog_image."' alt='Image for Blog Title' />";
        $viewBlog .= "      $blog</p>";
        $viewBlog .= "</div>\n";        

        echo $viewBlog;
    } 
}
?>

非常感谢任何 cmets。

Answer 1

好的。我现在看到了这个问题。 ajax 回调返回对话框的 HTML 代码。当您调用对话框时，它不会显示。我为你找到了一个与你所拥有的完全不同的解决方案，但有一点点改变。替换此部分：

$( "a.view" ).click(function(e) {
...
}

用这个：

$( "a.view" ).click(function(e) {
        e.preventDefault();
        var clickblogID = this.id.split('-'); //Split string 
        var DbNumberID = clickedID[1]; //and get number from array

        var url = "so18425926-ajax.aspx?blog_id=" + DbNumberID;
        // show a spinner or something via css
        var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
        // open the dialog
        dialog.dialog({
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            modal: true
        });
        // load remote content
        dialog.load(
            url, 
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
            }
        );
        //prevent the browser to follow the link
        return false;
    });

我从这篇文章中找到了这个解决方案：

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs