How to close a jQuery dialog after an AJAX JSON call

Question

I am using ASP.NET MVC 4, jQuery, and jQuery UI.

I have a dialog on my view. When I click a button the dialog pops up, takes the values on the dialog and send its through to a service. The service does what it needs to do and will either send back a blank message if it is successful or the actual error message. After this I need to check the error on the client side, close the current dialog and open a success dialog or the error dialog. I'm not sure how to close the current dialog and to display another dialog.

My button:

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

My dialogs:

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

my jQuery code:

$('#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');
            }
        }
    });

My action methods:

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);
}

How do I close the current pop up after the get JSON call and open another?

Solution

You have to add the dialog to the page first: Put this prior to your current:

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

Then what you have should work.

EDIT: I thought about this a bit, you probably need to fix the scope of the $(this) inside the success handler.

change to do:

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

and then use:

myDialog.dialog('close');

inside that handler to close the first dialog.

Comments

[tessi]

Some explanation (what you have done, what was the tricky part that was missing before, ...) would help to make your answer more understandable.

[radzi0_0]

I had similar scope problem. Thank you.

[David]

On the ... part I only formated the input variables in case they are null or have wrong values