title: How to close a jQuery dialog after an AJAX JSON call
body: <p>I am using <code>ASP.NET MVC 4</code>, <code>jQuery</code>, and <code>jQuery UI</code>.</p>
  
  <p>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.</p>
  
  <p>My button:</p>
  
  <pre><code>&lt;button id="TestButton" type="button"&gt;Display pop up&lt;/button&gt;
  </code></pre>
  
  <p>My dialogs:</p>
  
  <pre><code>&lt;div id="confirmationDialog"&gt;&lt;/div&gt;
  &lt;div id="successDialog"&gt;&lt;/div&gt;
  &lt;div id="errorDialog"&gt;error dialog&lt;/div&gt;
  </code></pre>
  
  <p>my jQuery code:</p>
  
  <pre><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');
              }
          }
      });
  </code></pre>
  
  <p>My action methods:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>How do I close the current pop up after the get JSON call and open another?</p>