Efficient way to show a jQuery dialog
<p>Users on my site currently see details of a person by clicking on a link which redirects them to a new page where details of the person are displayed using PHP and MySQL. I want to change this so that when the link is clicked they see the details in a popup which appears next to the link. </p>

<p>Showing these details in a jQuery tooltip will be too limiting because ultimately I plan to enable the user to interact with content in the popup.</p>

<p>Also adding a dialog to each link when the page loads is too slow as there may be 30 or more links on the page. The 2 second or more delay before the page finishes loading is not acceptable. Links on my site are typically created inside a loop.</p>

<p>Is it possible to create a dialog for only the link clicked?</p>

<p>I am currently looking at an approach using jQuery Ajax and the jQuery position and dialog functions. I would like the solution to be as lightweight and simple as possible and to avoid any page refresh. </p>

<p>The code below shows what I have come up with. This code fails to even post input data when requesting data from the database using Ajax. </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" /&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?php
// Shows the links
for($id=0;$id&lt;=80;$id++){
    echo("&lt;a id='link$id' onclick=showPopup($id)&gt;Click me at $id&lt;/a&gt;&lt;br/&gt;");
}
?&gt;
&lt;script&gt;
function showPopup(id){
    // Gets input needed to return database records for the link clicked
    var myObj={};
    myObj["database"]="ajaxdb";
    myObj["sql"]="select * from names"; // A where clause here would be specific to the link
    var input = JSON.stringify(myObj);
    // Gets the data to show in the dialog using Ajax
    $.post('return_rows.php',input,function(data){
        // Data would be formated here before being assigned to the div
        // ....
        // ....
        $('div#dialog'+id).html(data);
    });
    // Shows the dialog using jQueryUI
    $(function() {
        $('a#link'+id).ready(function(){
        $('#dialog'+id).dialog();
            // Positions opened dialog relative to the clicked link.
            $('#dialog'+id).dialog('widget').position({
                my: 'right top',
                at: 'left bottom',
                of: 'a#link'+id
            });
        });
    });
    document.write("&lt;div id='dialog'+id title='Title of dialog'+id&gt;&lt;/div&gt;");
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Any help to get a solution which works would be much appreciated. Please note however that I am neither familiar with Ajax nor jQuery. </p>
