使用PHP,jQuery以模态forms填充字段

我有一个表单,添加到数据库的链接,删除它们,并 – 很快 – 允许用户编辑详细信息。 我在这个项目上大量使用jQuery和Ajax,并希望将所有控件保留在同一页面中。 在过去,为了处理类似其他网站的详细信息(链接条目),我会将用户发送到另一个PHP页面,其中包含从MySQL数据库表填充PHP的表单字段。 如何使用jQuery UI模式表单完成此操作并为该特定条目单独调用详细信息?

这是我到目前为止的情况 –

 <div class="linkBox ui-corner-all" id="linkID"> 

Link:
<a href="https://stackoverflow.com/questions/2649913/populating-fields-in-modal-form-using-php-jquery/" target="_blank">https://stackoverflow.com/questions/2649913/populating-fields-in-modal-form-using-php-jquery/

Delete Edit

这是我用来删除条目的jQuery-

 $(".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; }); 

一切都很好,只需要找到一个编辑解决方案。 谢谢!

*已更新,包括您正在编辑的所有字段

听起来你有正确的想法。 您可能希望在页面上为编辑模式对话框创建一个新div。

  

当用户单击您的编辑按钮时,您将要使用他们单击的链接的值填充隐藏字段和文本框,然后打开对话框。

 $('.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 

通过在blahblah简单地包装来自PHP的每行文本并使用$(".theseDetails").text()解决$(".theseDetails").text() ; ….非常简单的解决方案。 🙂