jQueryUI .dialog（“close”）在ajax调用后不起作用答案

【问题标题】：jQueryUI .dialog("close") not working after ajax calljQueryUI .dialog（“close”）在ajax调用后不起作用
【发布时间】：2011-03-24 15:14:33
【问题描述】：

我正在使用带有模态表单选项的 jQueryUI 对话框来打开弹出表单。当用户单击一个按钮时，它会将他们的输入提交到数据库，然后应该关闭对话框。除了关闭对话框外，一切正常。（手动关闭按钮有效；它只是在从 PHP 数据库脚本返回后不会自动关闭。这是脚本代码。（我试图将不起作用的行加粗；显然你不能在代码标签内嵌套粗体，但该行用双星号包围以使其突出。这些不是实际代码的一部分！）

<script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        var name = $( "#name" ),
            email = $( "#email" ),
            company = $( "#company" ),
            plate = $( "#plate"),
            allFields = $( [] ).add( name ).add( email ).add( company ).add( plate ),
            tips = $( ".validateTips" );

        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }

        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }

        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 390,
            width: 350,
            position: 'top',
            modal: true,
            zIndex: 3000,
            buttons: {
                "Submit your plate": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( plate, "plate code", 1, 7 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( company, "company", 1, 100);

                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ismi@instoremarketer.org" );


                    if ( bValid ) {

                            var nameStr = name.val();
                            var emailStr = email.val();
                            var companyStr = company.val();
                            var plateStr = plate.val();

                            var string = 'name='+ nameStr+'&email='+emailStr+'&company='+companyStr+'&plate='+plateStr;
                            //alert('string: '+string);


                            $.ajax({
                               type: "POST",
                               url: "submit_plate.php",
                               data: string,
                               dataType: 'json',
                               cache: false,
                               success: function(returnData){
                                                            alert(returnData.msg);
                                if(returnData.error === false) {
                                    **$( this ).dialog( "close" );**
                                }
                                else {
                                    alert("Error: "+returnData.msg);
                                }
                              }

                             });


                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

        $( "#submit-plate" )
            //.button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    });
</script>

有什么想法吗？ 已编辑以添加 PHP 代码

<?php
include('../cfg/ez_sql.php');
include('../cfg/db_setup.php');

$err = false;
if (isset($_REQUEST['plate'])) {

    $raw = "INSERT INTO dot_plate_submissions (plate_code, plate_name, plate_company, plate_email) VALUES ('%s', '%s', '%s', '%s')";
    $clean = sprintf($raw,
               mysql_real_escape_string($_REQUEST['plate']),
               mysql_real_escape_string($_REQUEST['name']),
               mysql_real_escape_string($_REQUEST['company']),
               mysql_real_escape_string($_REQUEST['email']));

    //error_log("cleaned query: $clean");

   $db->query($clean);
}
else {
    $err = true;
}

if($err) {
    $return['error'] = true;
    $return['msg'] = "There was an error submitting your plate";
}
else {
    $return['error'] = false;
    $return['msg'] = "made it to php";
}
echo json_encode($return);
?>

所以即使错误为假，ajax 调用仍应返回两条数据。

【问题讨论】：

您假设正在执行成功回调函数。您可以在 .dialog 之前、else 语句中和 $.ajax 调用之后添加警报吗？然后我们就可以定位问题出在哪里了。
我不确定你指的是哪里。我的成功 else 声明中没有 .dialog。它在 if 语句中。你的意思是在那里添加一个警报以确保它是正确的吗？我刚试过，警报没有发生。虽然它确实将数据发布到数据库，所以显然 if 语句没有得到它所期望的。有没有办法显示被发回的 json？如果我故意将 PHP 设置为返回 error = true，else 语句中的警报确实有效。
你应该有一个警报来告诉你 returnData 到底是什么。将警报完全放在 if 语句之前。很抱歉造成误解。
试过了；警报根本不会发生。因此，即使它发布到数据库，成功显然没有发生。有任何想法吗？我将把 PHP 代码添加到 OP，这样你就可以看到那里发生了什么 - 也许它没有正确返回东西？
尝试使用 GET 请求从浏览器访问您的 PHP 脚本。看看你是否得到了合适的返回数据。

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

更改您的 $.ajax 调用以包含上下文，以便 $(this) 在回调中有效：

$.ajax({
    type: "POST",
    url: "submit_plate.php",
    data: string,
    dataType: 'json',
    context: $(this),
    cache: false,
    success: function(returnData){
        if(returnData.error === false) {
            $( this ).dialog( "close" );
            } else {
                  alert("Error: "+returnData.msg);
            }
    }   
});

【讨论】：

这是我的第一个想法，这（如在对话框中）在 ajax 中丢失了上下文，但添加 context: $(this) 行没有任何区别。
@EmmyS：尝试在$ajax 调用之前添加var that = this;，然后添加context: that
谢谢，但是如果您将 cmets 读给 OP，您会发现并不是它失去了上下文 - 而是成功函数似乎根本没有被调用，或者是'即使 PHP 文件正在发送它，也没有收到任何数据。
谢谢，添加context:$(this) 解决了我的问题。
添加上下文也解决了我的问题:)

【解决方案2】：

当您初始化对话框时，请执行以下操作：

var dialog = $( "#dialog-form" ).dialog({....});

一旦您准备好关闭对话框，而不是使用 $(this) 尝试：

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

过去，我在遇到相同问题的情况下编写的解决方案中不得不这样做

【讨论】：

我遇到了完全相同的问题。我在我的页面上使用 ASP UpdatePanel for AJAX，您的解决方案对我有用。
为我解决了这个问题，也使用了 ASP.NET 更新面板
在 XSL 转换后为我工作。谢谢！

【解决方案3】：

在“错误”子函数而不是“成功”中写：

$("#diaolog-form-id").dialog("close");

【讨论】：

【解决方案4】：

我使用了 Anthony Shaw 的解决方案。它对我来说非常有用，而且我使用的是 ASP.net AJAX，所以看起来这个问题与 PHP 无关。

这里有一些简单的 JavaScript 可以完成这项工作：

var DialogOps = function () {        
    var _dialog;
    this.showDialog = function () {
        _dialog = $('#dialog').dialog({
          // dialog options here
        });
    }
    this.closeDialog = function () {
        $(_dialog).dialog('close');
    }
}
var dialogOps = new DialogOps();

调用dialogOps.showDialog() 打开对话框，调用dialogOps.closeDialog() 关闭它。

【讨论】：

不，与 PHP 无关。事实证明，问题在于我使用的是较新版本的 jqueryui 和较旧版本的 jquery。一旦我切换到较新版本的 jquery，它就可以正常工作。

【解决方案5】：

我几个月前就解决了这个问题，但忘了回来发布解决方案。它与我的代码无关；这只是jqueryui和jquery之间的版本冲突。我使用的是旧版本的 jquery；一旦我将我的库更新到 jqueryui 所需的版本（实际上在演示页面上非常清楚地指出了这一点；我不仔细阅读不好！）一切正常。

【讨论】：

-1：你的具体问题到底是什么并不重要。重要的是 1）标题和 OP（在这种情况下，您）对问题给出的描述以及 2）根据相同的标题和描述，哪个给定的答案是最好的。而且你的回答肯定不是最好的，抱歉。