Как я выскакиваю диалоговое окно jquery с данными MySQL?

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"
        }
    });

Вот как я отправляю ajax-запрос данных из php-файла для обновления содержимого в диалоговом окне.

$( "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;
    } 
}
?>

Любые комментарии с благодарностью.

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, загруженное в виде вкладок jQuery UI в стиле AJAX