使用 PHP、jQuery 以模态形式填充字段

Question

我有一个表单，它可以添加指向数据库的链接、删除它们，并且——很快——允许用户编辑详细信息。我在这个项目中大量使用 jQuery 和 Ajax，并希望将所有控件都保留在同一页面中。过去，为了处理编辑关于另一个网站的详细信息（链接条目）之类的内容，我会将用户发送到另一个 PHP 页面，其中的表单字段由 MySQL 数据库表中的 PHP 填充。如何使用 jQuery UI 模态表单并单独调用该特定条目的详细信息来完成此操作？

这是我目前所拥有的-

<?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?>
<div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>">
<div class="linkHeader"><?php echo $linkDetails['title'];?></div>
<div class="linkDescription"><p><?php echo $linkDetails['description'];?></p>
<p><strong>Link:</strong><br/>
<span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div>
<p align="right">
<span class="control">
<span class="delete addButton ui-state-default">Delete</span> 
<span class="edit addButton ui-state-default">Edit</span>
</span>
</p>
</div>
<?php }?>

这是我用来删除条目的 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;
});

一切正常，只需要找到一个解决方案进行编辑。谢谢！

Answer 1

*已更新以包含您正在编辑的所有字段

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

<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>

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

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

Answer 2

通过简单地将PHP中的每一行文本包装在<span class="theseDetails">blahblah</span>中并使用$(".theseDetails").text();....非常简单的解决方案。 :)