jQuery UI dialogs based on dynamically generated information - php

Question

Right now I have a table with a few items, each of which has an Edit icon. When the edit icon is clicked, the corresponding database ID of the item (its name) is sent via a $.get() AJAX method to process.php, which generates a JQuery UI dialog consisting of a few of that database item's attributes.
The first item that I click on brings up the proper dialog box with all of the attributes filled in the text boxes. However, when I click a different item, the same dialog box appears with the first item's information. Any other ones I click on still have that first item's information in the dialog box.
What I'm guessing is happening is that the data sent back to index.php, the new div and the jquery dialog call, has already been echo'd through and appended to the page--thus I get the same first box over and over. I just can't figure out how to fix it.
portion of index.php:
$('#edit_link').live('click', function(e){
var ID = $(this).attr('name');
console.log(ID);
$.get('process.php', {taskID: ID}, function(data){
$('body').append(data);
});
e.preventDefault();
})
...the console successfully logs each item's taskID, so that's not the problem.
process.php:
if(isset($_GET['taskID'])){
$taskID = $_GET['taskID'];
$task = TaskDB::getTask($taskID);
$duration = $task->getDuration();
$description = $task->getDescription();
$deadline = $task->getDeadline();
echo '<script>$("#dialog").dialog({
height: 150,
width: 300,
modal: true,
buttons: {
"Save Task": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});</script><div id="dialog" title="Edit Task" style="display:none;">
<p>Deadline: <input type="text" style="margin-right:10px;" value="'.$deadline.'"/> Duration (hours): <input type="text" style="width:20px;" value="'.$duration.'"/></p>
<p>Description: <input type="text" style="width: 200px;" value="'.$description.'"/></p>
</div>';
}
The echo portion is where I think the problem is, as the previous echoed data is not cleared out if another Edit was clicked.
Any help would be greatly appreciated. Also, I'm not entirely sure if what I'm doing is the best means for carrying out this goal (having PHP generate so much html/javascript), so any suggestions regarding that would also be very much appreciated. Thanks!

Answer 1

I think you should first remove the previous dialog from body. Try this:
$('#edit_link').live('click', function(e){
var ID = $(this).attr('name');
console.log(ID);
$("#dialog").remove(); // Delete the previous dialog
$.get('process.php', {taskID: ID}, function(data){
$('body').append(data);
});
e.preventDefault();
})

Answer 2

That sounds like you have to use .destroy() function when close the dialog. This function will reset your dialog
$('.dialog').dialog({
// your options
close : function() {
$('.dialog').dialog("destroy");
}
});