如何在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

在的getJSON回调关闭窗口

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

要关闭jQuery UI的对话框使用该

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

顶部打开一个新的对话框

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

更多信息检查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"); 

}