Get MySQL data inside jQuery UI Dialog - php

Question

I have list of user and I want to open each user detail in jQuery UI Popup. I write whole code but I'm confused how to pass each user ID to the dialog. Below is my code,
HTML
<div id="dialog" title="User Detail">
<p><?php $userID = $_GET[userID]; ?></p>
</div>
<a id="opener" href="#?userID=1">User 1</a>
<a id="opener" href="#?userID=2">User 2</a>
jQuery
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false
});
jQuery( "#opener" ).click(function() {
jQuery( "#dialog" ).dialog( "open" );
});
});

Answer 1

To start, you cannot reuse an ID for a DOM element, so the selector you're using will only work for the first instance of the link with id="opener".
When you open the dialog, jQuery is simply showing an element on the current page which already exists and is not making a request to that or a new page. $_GET is a server-side super global and is only displayed when the page loads.
What you need to do is:
use "opener" as a class instead of an id
override the dialog's open
function to accept an additional parameter append that parameter to
your dialog markup
You can accomplish this with the following code which grabs the user id from the href attribute:
HTML:
<div id="dialog" title="User Detail">
<p></p>
</div>
<a class="opener" href="#?userID=1">User 1</a>
<a class="opener" href="#?userID=2">User 2</a>
Javascript:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false,
open: function (event, ui) {
var id = $(this).data('id');
$('#dialog p').text(id);
}
});
jQuery( ".opener" ).click(function(event) {
event.preventDefault();
var id = $(this).attr('href').split('=')[1]; // grab id
jQuery( "#dialog" ).data('id', id).dialog( "open" );
});
});
The PHP to generate each link would look something like this:
$users = array(
array(
'id' => 1,
'name' => 'User 1',
),
array(
'id' => 2,
'name' => 'User 2',
)
);
foreach ($users as $user) {
print "<a class=\"opener\" href=\"#?userID=$user[id]\">$user[name]</a>";
}
*note I was lazy on that last one and escaped the quotes within the printed string

Answer 2

For a start IDs must be unique so I changed your opener ID into a class.
Then you may want to look at this:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false
});
jQuery( ".opener" ).click(function() {
jQuery("#dialog p").text(jQuery(this).attr("href").substring(jQuery(this).attr("href").indexOf('=') +1));
jQuery( "#dialog" ).dialog( "open" );
});
});
In short, you build your dialog and then you display it.
And the working Fiddle