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!
