使用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
*已更新,包括您正在编辑的所有字段
听起来你有正确的想法。 您可能希望在页面上为编辑模式对话框创建一个新div。
Link Name: Link Description Link URL
当用户单击您的编辑按钮时,您将要使用他们单击的链接的值填充隐藏字段和文本框,然后打开对话框。
$('.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()
; ….非常简单的解决方案。 🙂