Question

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

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

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

    return false;

});

Answer 1

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

检索信息

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

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

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

即。有一个看起来像这样的锚标记：

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

Answer 2

你想把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;
                     }

希望这是你需要知道的！

Answer 3

让您的标签的href值设置为editform可用的页面。您使用查询字符串将记录的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;           
        });
  });

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

Jquery - 在对话框窗口打开时从数据库获取数据

3 个答案: