如何在AJAX JSON调用后关闭jQuery对话框
我正在使用ASP.NET MVC 4 ， jQuery和jQuery UI 。
我的观点有一个对话框。 当我单击按钮时弹出对话框，获取对话框上的值并将其发送到服务。 该服务执行它需要做的事情，并且如果成功或者实际的错误消息将发送回空白消息。 在此之后，我需要检查客户端的错误，关闭当前对话框并打开成功对话框或错误对话框。 我不确定如何关闭当前对话框并显示另一个对话框。
我的按钮：
我的对话框：
error dialog
我的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调用后关闭当前弹出窗口并打开另一个？
您必须先将对话框添加到页面中：将其放在当前页面之前：
$('#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');
在该处理程序内关闭第一个对话框。
在getJSON回调中关闭窗口
$.getJSON( "test/demo", function( data) { if(data==='success'){ $( ".selector" ).dialog( "close" ); $( ".selector" ).dialog( "open" ); } });
要关闭jquery UI对话框，请使用此选项
$( ".selector" ).dialog( "close" );
顶部打开一个新对话框
$( ".selector" ).dialog( "open" );
有关更多信息，请查看jquery UI的api http://api.jqueryui.com/dialog/#method-close
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: Hello World ';
functin returnInfo (id){ // Do something with the selected item // close dialog dialogAviso.dialog("close"); }