Jquery - 当对话框窗口打开时从数据库中获取数据答案

【问题标题】：Jquery - Getting data from database when dialog window opensJquery - 当对话框窗口打开时从数据库中获取数据
【发布时间】：2012-04-17 01:17:33
【问题描述】：

我有一个表格，在那个表格上有一个记录表。每条记录都来自 mysql 数据库，每条记录在数据库中都有自己的唯一 ID。我正在使用 Jquery UI 对话框库，每条记录旁边都有一个编辑链接。当一个人单击编辑时，将调用对话框打开，其中显示表单的模式窗口以编辑该特定记录。我的问题是，当对话框打开时，我将如何通过 jquery/ajax 进行调用，以便我可以从数据库中获取该记录的最新数据，然后填充对话框中的字段？现在我只是在单击链接时打开对话框：

$("a.editlink").click(function() {

    $("#edit-form").dialog("open");

    return false;

});

【问题讨论】：

标签： jquery jquery-ui-dialog

【解决方案1】：

您需要将 ajax 调用放在对话框 js 代码的 OPEN 部分：

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {

                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
                    $( this ).dialog( "close" );
        },
                    open: function(){ 
         PUT AJAX CALL HERE
        }
    });

并将innerHTML放入ajax成功后将结果放入对话框表单中：

function ajaxSuccess(data){
                     dialogformfields.innerHTML=data.info;
                     }

希望这是您需要知道的！

【讨论】：

我喜欢这种方法，但是我很难过的一件事是如何将我单击的链接中的 id 传递给打开的函数，以便我可以将它传递给我的 ajax 调用？所以让我们说在父页面上我有一个像这样的链接 Edit 当他们点击我调用对话框打开时，我如何访问我刚刚从打开功能中单击的链接的标题属性？
好的，将初始函数更改为： $("a.editlink").click(function(this) { DO AJAX CALL HERE with this.title $("#edit-form").对话框（“打开”）； ...

【解决方案2】：

在 click 函数中，您需要使用 http://api.jquery.com/jQuery.ajax/ 进行 Ajax 调用以检索信息

在 ajax 调用的成功方法中，您可以将返回的值分配给表单上的输入字段。

我不知道你的后端是什么技术，所以你只需要确保它以可读的方式返回值（即 JSON）。

唯一需要考虑的是，当用户点击编辑时，这会变慢。如果页面没有太多数据，则可能值得将附加属性存储在单击的锚标记中，以便您可以立即填充编辑表单。

即。有一个如下所示的锚标记：

<a class="editlink" data-field1='stuff' data-field2='stuff' data-field3='stuff'>Text</a>

【讨论】：

【解决方案3】：

让您的 a 标签将 href 值设置为可使用编辑表单的页面。您使用查询字符串将记录的 id 传递到此页面，以便您可以将该记录的详细信息加载到编辑表单。

<a href="edtiuser.php?userid=1">Edit User 1</a>
<a href="edtiuser.php?userid=2">Edit User 2</a>

并拥有这个脚本。

$(function(){
        $("a.editlink").click(function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,
                        width: 460
                    });
                }
            );           
            return false;           
        });
  });

因此，当您单击锚标记时，您的 edituser.php 页面的内容将被加载到对话框中。这应该可以正常工作，假设您已将 jQuery 和 jQuery UI 正确加载到您的页面。

【讨论】：