1

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

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

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

    return false;

});
4

3 回答 3

0

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

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

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

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

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

<a class="editlink" data-field1='stuff' data-field2='stuff' data-field3='stuff'>Text</a>
于 2012-04-17T01:36:13.150 回答
0

您需要将 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;
                     }

希望这是你需要知道的！

于 2012-04-17T01:38:55.103 回答
0

让您的 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 正确加载到您的页面。

于 2012-04-17T01:47:45.140 回答