2

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.

Improve this question
6
  • What does the commented out code alert(data) show? Commented Aug 25, 2013 at 5:50
  • nothing.. it is not triggering that alert? Commented Aug 25, 2013 at 5:57
  • Can anybody tell me what is the wrong with this code? Thank you. Commented Aug 25, 2013 at 6:03
  • No JS errors? Your HTML code isn't posted. Is the selector $( "a.view" ) correct? var blogId = 'blog_id='+ DbNumberID; should be var blogId = {'blog_id': DbNumberID }; Commented Aug 25, 2013 at 6:04
  • @raylee Yes there is no any js errors in my firebug when I executing this script.. Commented Aug 25, 2013 at 6:13

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

@reylee, I tried with your answer but still I can not figure this out.
what's happening? are you getting a popup and it's not looking as it should?
@reylee, I can't get the popup
jsfiddle.net/raylee/QCgLN check out this jsFiddle I made. Note where you would tailor it for you. I haven't seen the rest of your code. Hopefully you'll be able to make it work.
Thanks for your help. Still I couldn't figure this out. I tried with your guidance and now I can get popup dialog but in that dialog my contents not display. Php script which is I use to load data is working properly. Check I have updated my question with my php code
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.