* Đã cập nhật để bao gồm tất cả các trường bạn đang chỉnh sửa
Có vẻ như bạn có ý tưởng đúng. Bạn có thể muốn tạo một div mới trên trang của mình cho hộp thoại phương thức chỉnh sửa.
<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>
Khi người dùng nhấp vào nút chỉnh sửa của bạn, bạn sẽ muốn điền vào trường ẩn và hộp văn bản với các giá trị của liên kết mà họ đã nhấp vào, sau đó bật hộp thoại.
$('.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