javascript - 如何在 AJAX JSON 调用后关闭 jQuery 对话框

Question

我正在使用ASP.NET MVC 4,jQuery和jQuery UI.

我的观点有一个对话框。当我单击一个按钮时，会弹出对话框，获取对话框上的值并将其发送到服务。该服务会做它需要做的事情，如果成功，它会发回一条空白消息或实际的错误消息。在此之后，我需要在客户端检查错误，关闭当前对话框并打开成功对话框或错误对话框。我不确定如何关闭当前对话框并显示另一个对话框。

我的按钮：

<button id="TestButton" type="button">Display pop up</button>

我的对话框：

<div id="confirmationDialog"></div>
<div id="successDialog"></div>
<div id="errorDialog">error dialog</div>

我的 jQuery 代码：

$('#TestButton').click(function () {
    $('#confirmationDialog').dialog('open');
});

$('#errorDialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 500,
    title: 'Add Rule Detail Error',
    buttons: {
        'Ok': function () {
            $(this).dialog('close');
        }
    }
});

$('#confirmationDialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 330,
    title: 'Add Rule Detail Confirmation',
    open: function (event, ui) {
        $(this).load('@Url.Action("AddRuleConfirmation")' +
            '?systemCode=' + $('#SystemCode').val());
        },
        buttons: {
            'Yes': function () {
                var url = '@Url.Action("AddRuleConfirmationSubmit")';
                var data = {
                    systemCode: $('#SystemCode').val()
                };

                $.getJSON(url, data, function (message) {
                    alert(message);
                    if (message == '') {
                        $(this).dialog('close');
                    }
                    else {
                        $(this).dialog('close');
                        $('#errorDialog').dialog('open');
                    }
                });
            },
            'No': function () {
                $(this).dialog('close');
            }
        }
    });

我的操作方法：

public ActionResult AddRuleConfirmation(string systemCode)
{
    DetailConfirmationViewModel viewModel = new DetailConfirmationViewModel()
    {
        SystemCode = systemCode
    };

    return PartialView("_AddRuleConfirmation", viewModel);
}

public ActionResult AddRuleConfirmationSubmit(string systemCode)
{
    CreateRuleViewModel viewModel = new CreateRuleViewModel()
    {
        SystemCode = systemCode
    };

    ResCodeRuleAdd_Type result = ruleService.AddRule(viewModel);
    string message = string.Empty;

    if (result != ResCodeRuleAdd_Type.R00)
    {
        // Get the error message from resource file
        message = ...
    }

    return Json(message, JsonRequestBehavior.AllowGet);
}

如何在获取 JSON 调用后关闭当前弹出窗口并打开另一个？

Answer 1

您必须先将对话框添加到页面：将其放在当前：

$('#errorDialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 330,
    title: 'My Error Dialog'
});
//current code follows:
$('#confirmationDialog').dialog({

那么你所拥有的应该工作。

编辑：我考虑了一下，您可能需要修复$(this)成功处理程序内部的范围。

更改为：

var myDialog = $('#confirmationDialog').dialog({

然后使用：

myDialog.dialog('close');

在该处理程序中关闭第一个对话框。

Answer 2

In the getJSON callback close the window

$.getJSON( "test/demo", function( data) {
     if(data==='success'){
         $( ".selector" ).dialog( "close" );
         $( ".selector" ).dialog( "open" );
     }
});

To close the jquery UI dialog use this

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

Top Open a new dialog

$( ".selector" ).dialog( "open" );

for more info check the api of jquery UI http://api.jqueryui.com/dialog/#method-close

Answer 3

var dialogAviso; 

    url = "search.php";
    $.ajax( {
            "type": "POST", 
            "url": url, 
            "data": data, 
            "global": false,
            "async": true,
               "success": function(html){
                    msg_title ="Search";
                    msg_width = "600px";
                    showDialog(html,msg_title,msg_width);
                }
         } );           


function showDialog(texto, titulo, width,height){
.......................
// IMPORTANT: send info to the aux variable, so you can access it from the dialog.
    dialogAviso = $('#divaviso').dialog({
        autoOpen: true,
        width: width,
        height:height,
        modal:true,
        resizable: false,
        title: titulo,
        dialogClass: 'dialog',
        closeOnEscape:true,
        beforeClose: function(){
        },
        close: function(event, ui) { 
            $(this).dialog( "destroy" );            
        },
        show: "slide",
        zindex: 100,
        stack:true,
        buttons: {} 
    }); 
    $('#divaviso').html(texto); 
}


search.php: 
<table>
    <tr>
    <td><a style=\"text-decoration:underline;cursor:pointer;\" onclick="returnInfo(8)">Hello World</td>';
    </tr>   
</table>

functin returnInfo (id){
// Do something with the selected item

// close dialog
dialogAviso.dialog("close");

}