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

我有一个表单，可以向数据库添加链接，删除它们，并且很快允许用户编辑详细信息。我在这个项目中大量使用jQuery和Ajax，并且希望将所有控件都保留在同一个页面中。在过去，为了处理编辑其他网站的详细信息（链接条目），我会将用户发送到另一个PHP页面，其中的表单字段由MySQL数据库表中的PHP填充。如何使用jQueryUI模式表单并分别调用该特定条目的详细信息来实现这一点

这是我到目前为止所拥有的-

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

---

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

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

听起来你的想法是对的。您可能希望在页面上为“编辑模式”对话框创建一个新的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>

---

只需将PHP中的每一行文本包装在

blahblah

中并使用

$（“.theseDetails”）.text（）

；。。。。非常简单的解决方案。：）

如果您成功地执行了删除操作，那么您将成功地执行编辑操作。您可以使用$（'.linkHeader'）.html（）获取值，并将它们传递给模式窗体上的控件。看起来这正是我要寻找的，今晚进行测试为时已晚。请您解释一下.find（.linkHeader'）.html（）的作用是什么？之前的一张海报提到了这一点，我无法在jQuery的API或web上找到任何信息。。谢谢！：）我撒了谎，在我结束一天的工作之前，我不得不尝试这个——工作得很好。非常感谢你的帮助！但仍在考虑.find（'.linkHeader'）.html（）。再次感谢：）好吧，也许我说得太早了。我看到它使用您提供的示例提取标题，但我无法让它以相同的方式提取描述和URL。我需要能够编辑每个部分。有什么想法吗？在HTML代码中有一个名为“linkHeader”的div，其中显示了链接的标题。find方法在父div（linkID div）中搜索并查找“linkHeader”div。然后，html（）函数查找该div中的html代码。在本例中是链接标题。我更新了上面的答案，以显示如何处理所有字段。就我个人而言，我可能会改变你的HTML标记，使选择器更容易一些，但上面的方法会起作用。是的，显然这也不起作用。。没有考虑到这样一个事实，即存在多条记录，它只会从每个具有该ID的跨度中提取并将它们全部合并在一起，例如：Site1SomeWhere Site2SomeWhere，等等，这就是为什么您需要将选择器基于您单击的编辑按钮的父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