*Atualizado para incluir todos os campos que você está editando
Parece que você tem a ideia certa. Você provavelmente gostaria de criar um novo div em sua página para a caixa de diálogo de edição modal.
<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>
Quando o usuário clicar no botão de edição, você desejará preencher o campo oculto e a caixa de texto com os valores do link em que clicou e, em seguida, ativar a caixa 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
