How I pop-up a jquery dialog with mysql data?

Question

I have a question about jQuery UI Dialog box and showing dynamic content from a database.

Here I have a table which is generating blog post using php and mysql and in that table, there is a column to view contents which are belong to each blog post.

That link is something like this -

    $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";

Clicking on above link I need to pop-up a jQuery dialog to display all blog content. Eg: blog-title, author, image, blog etc.

I tried it with jQuery and using separate php script to fetch blog contents like this. But it is not pop-up the dialog as I expect.

This is jQuery I have used for the dialog -

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

This is how I send a ajax request for the data from the php file to update the content in the dialog -

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

FROM MY PHP page -

<?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;
    } 
}
?>

Any comments are greatly appreciated.

Answer 1

Ok. I see the issue now. The ajax callback returns the HTML code for the dialog. When you call the dialog it doesn't show. I found a solution for you that's quite different from what you have but a small change. Replace this section:

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

with this:

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

I found this solution from this post:

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs