Question

I am asking this question that how can you develop such thing with PHP+MySQL+jQuery which is done with ASP in this address (Figure 10): http://msdn.microsoft.com/en-us/magazine/dd722809.aspx#id0400013

I would like to have MySQL table data to be printed on jQuery UI Dialog popup when I click a message link in a frontpage. I can get it printing the HTML table headings and such but no MySQL table data at all.

This is how the front page works now without jQuery (it’s a bulletin board system):

$sql="SELECT * 
      FROM message, user 
      WHERE message.userID = user.userID 
      ORDER BY messageID DESC";
$result=mysql_query($sql);

The link in a message heading which opens up a new page:

<a href="message.php?id=<?php echo $rows['messageID']; ?>">

This is the code which is now on the “all fields” page of a message:

$id=$_GET['id'];
$sql="SELECT * 
      FROM message, user 
      WHERE message.userID = user.userID AND messageID='$id'";
$result=mysql_query($sql);`

Answer 1

The following is an example of how to use AJAX to load content into a jQuery Dialog

HTML

<a class="loadextradata" href="message.php?id=<?php echo $rows['messageID']; ?>">

JavaScript

$('.loadextradata').on('click', function() {
    var url = this.href;  // get the url from the anchor
    var dialog = $("#dialog"); // get DOM element
    if ($("#dialog").length == 0) {  // if it doesnt exist create it
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url, // to the url from the anchor href attribute
            {},
            function(responseText, textStatus, XMLHttpRequest) { // success callback
                dialog.dialog();  // show the dialog
            }
        );
    return false; // prevent the default action on the anchor
});

message.php needs to send the HTML you want to show in the dialog. To have inline editing this would need to be a form that submits to another PHP.