*Actualizado para incluir todos los campos que está editando
Parece que tienes la idea correcta. Probablemente desee crear un nuevo div en su página para el cuadro de diálogo modal de edición.
<div id="dialog-edit" style="background-color:#CCC;display:none;">
<input type="hidden" id="editLinkId" value="" />
Link Name: <input type="text" id="txtLinkTitle" class="text" />
Link Description <input type="text" id="txtLinkDescription" class="text" />
Link URL <input type="text" id="txtLinkURL" class="text" />
</div>
Cuando el usuario haga clic en su botón de edición, querrá completar el campo oculto y el cuadro de texto con los valores del enlace en el que hizo clic y luego activar el cuadro de diálogo.
$('.edit').click(function () {
//populate the fields in the edit dialog.
var parent = $(this).closest('div');
var id = parent.attr('id');
$("#editLinkId").val(id);
//get the title field
var title = $(parent).find('.linkHeader').html();
var description = $(parent).find('.linkDescription p').html();
var url = $(parent).find('.linkDescription span a').attr("href");
$("#txtLinkTitle").val(title);
$("#txtLinkDescription").val(description);
$("#txtLinkURL").val(url);
$("#dialog-edit").dialog({
bgiframe: true,
autoOpen: false,
width: 400,
height: 400,
modal: true,
title: 'Update Link',
buttons: {
'Update link': function () {
//code to update link goes here...most likely an ajax call.
var linkID = $("#linkID").val();
var linkTitle = $("#txtLinkTitle").val()
var linkDescription = $("#txtLinkDescription").val()
var linkURL = $("#txtLinkURL").val()
$.ajax({
type: "GET",
url: "ajax_calls.php?function=updateLink&linkID=" + linkID + "&linkTitle=" + linkTitle + "&linkDescription=" + linkDescription + "&linkURL=" + linkURL,
dataType: "text",
error: function (request, status, error) {
alert("An error occured while trying to complete your request: " + error);
},
success: function (msg) {
//success, do something
},
complete: function () {
//do whatever you want
}
}); //end ajax
//close dialog
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
},
close: function () {
$(this).dialog("destroy");
}
}); //end .dialog()
$("#dialog-edit").show();
$("#dialog-edit").dialog("open");
}) //end edit click