javascript - 如果ajax成功则关闭对话框

Question

我正在使用对话框将新用户添加到数据库，如果验证通过并且用户成功保存，我想关闭对话框。请指教

   $('.add_user_link a').each(function () {

            var $link = $(this);
            var $dialog = $('<div id="dialog"></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                });

            $link.click(function () {

              $dialog.dialog('open');

                $('#add_user').submit(function () {

                    url = '/user/useradd/';
                    $.ajax({
                        type: "POST",
                        cache: false,
                        url: $('#add_user').attr('action'),
                        data: $('#add_user').serializeArray(),

                        success: function (data) {

                            var json_obj = $.parseJSON(data);
                            var result = json_obj['result'];
                            var lname = json_obj['lname'];
                            var email = json_obj['email'];
                            var fname = json_obj['fname'];

                            if (!result) {

                                $("#dialog").dialog('close');
                            }
                            else {
//                              
                                document.getElementById('email-error').innerHTML = email;

                                var fname_count = $("label[id*='errorfname']").length;

                                    $('input[name=fname]').after('<label id="errorfname"></label>');
                                    document.getElementById('errorfname').innerHTML = fname;



                                var lname_count = $("label[id*='errorlname']").length;
                                if (lname_count == 0) {
                                    $('input[name=lname]').after('<label id="errorlname"></label>');
                                    document.getElementById('errorlname').innerHTML = lname;
                                }




                            }



                        }


                    });
                    return false;
                });
                return false;
            });
        });

我收到此错误

jquery-1.11.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Answer 1

替换:

$("#dialog").dialog('close');

与

$dialog.dialog('close')

您已经在点击函数中为对话框设置了一个变量，该变量应该在范围内，因此您不需要重新选择它。

更新: 元素 ID 应该是唯一的，因此如果有多个链接，则在为链接添加对话框 ID 时应该使对话框 ID 唯一。否则，当存在多个链接时执行此 $('#dialog') 操作时，您将选择多个对话框元素。

当你这样做时:

$dialog = $('<div id="dialog"></div>')

ID 值“dialog”应该是唯一的，例如“dialog1”、“dialog2”等。