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

通过在<span class="theseDetails">blahblah</span>中使用$(".theseDetails").text()简单地包装来自PHP的每行文本并使用{{1}}来解决....非常简单的解决方案。：）

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

2 个答案: