Populating fields in modal form using PHP, jQuery
- by Benjamin
I have a form that adds links to a database, deletes them, and -- soon -- allows the user to edit details. I am using jQuery and Ajax heavily on this project and would like to keep all control in the same page. In the past, to handle editing something like details about another website (link entry), I would have sent the user to another PHP page with form fields populated with PHP from a MySQL database table. How do I accomplish this using a jQuery UI modal form and calling the details individually for that particular entry?
Here is what I have so far-
<?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?>
<div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>">
<div class="linkHeader"><?php echo $linkDetails['title'];?></div>
<div class="linkDescription"><p><?php echo $linkDetails['description'];?></p>
<p><strong>Link:</strong><br/>
<span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div>
<p align="right">
<span class="control">
<span class="delete addButton ui-state-default">Delete</span>
<span class="edit addButton ui-state-default">Edit</span>
</span>
</p>
</div>
<?php }?>
And here is the jQuery that I am using to delete entries-
$(".delete").click(function() {
var parent = $(this).closest('div');
var id = parent.attr('id');
$("#delete-confirm").dialog({
resizable: false,
modal: true,
title: 'Delete Link?',
buttons: {
'Delete': function() {
var dataString = 'id='+ id ;
$.ajax({
type: "POST",
url: "../includes/forms/delete_link.php",
data: dataString,
cache: false,
success: function()
{
parent.fadeOut('slow');
$("#delete-confirm").dialog('close');
}
});
},
Cancel: function() {
$(this).dialog('close');
}
}
});
return false;
});
Everything is working just fine, just need to find a solution to edit. Thanks!
