title: jQuery UI Dialog opening partial view (.ascx)
body: <p>I am a little confused on how to open a partial view inside of a jquery UI Dialog window.  I was doing it with simple Dialog but for various reasons, I decided to go in a different direction.  All the tutorials online are just opening <code>&lt;div&gt;&lt;/div&gt;</code>'s and that's fine, but I need to open an entire ascx file...  BTW I plan on having jquery validation and jquery UI Datepickers inside this partial view.  </p>
  
  <p>Any example's or tutorials that you guys know of?</p>
  
  <p>Thanks,
  I can provide some of my sample code if you guys need it.</p>
  
  <p><strong>UPDATE: More details plus code</strong>
  This would indeed be an MVC partial view.  Some code of what I tried previously follows this sentence...</p>
  
  <pre><code>    $(document).ready(function () {
  
      var $dialog = $('&lt;div&gt;&lt;/div&gt;')
      .load('&lt;%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%&gt;')
      .dialog({
          autoOpen: false,
          title: 'Edit Patient ACO information'
      });
      });
  </code></pre>
  
  <p>That is my jQuery Code...</p>
  
  <pre><code>    %&gt;&lt;%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%&gt;&lt;%              
  </code></pre>
  
  <p>That would be the EditTemplate is the name of the view (which loads a partial view if it is a javascript request a reqular view if not)</p>
  
  <p><strong>More Code to help others see what is going on</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  $(function () {
  
      $('a.tempDlg').live("click", function(event) {loadDialog(this, event, '#edit-set');});
      $('a.AddPatDlg').live("click", function(event) {loadDialog(this, event, '#addPat');});
      $('a.AcoData').live("click", function(event) {loadDialog(this, event, '#addEncounter');});
  
  
  }); /* end document.ready() */
  
  function loadDialog(tag, event, target) {
      event.preventDefault();
      var $loading = $('&lt;img src="&lt;%=ResolveClientUrl("~/images/ajaxLoading.gif")%&gt;" alt="loading" class="ui-loading-icon"&gt;');
      var $url = $(tag).attr('href');
      var $title = $(tag).attr('title');
      var $dialog = $('&lt;div&gt;&lt;/div&gt;');
      $dialog.empty();
      $dialog
          .append($loading)
          .load($url)
                  .dialog({
                      autoOpen: false
                          , title: $title
                          , width: 950
              , modal: true
                          , minHeight: 200
              , show: 'fade'
              , hide: 'fade'
                  });
  
      $dialog.dialog("option", "buttons", { "Cancel": function () {
          $(this).dialog("close"); $(this).empty();
      },
          "Submit": function () {
              var dlg = $(this);
              $.ajax({
                  url: $url,
                  type: 'POST',
                  data: $("#target").serialize(),
                  success: function (response) {
                      $(target).html(response);
                      dlg.dialog('close');
                      dlg.empty();
                      $("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
                          var e = this;
                          setTimeout(function () { $(e).fadeOut(400); }, 2500);
                      });
                  },
                  error: function (xhr) {
                      if (xhr.status == 400)
                          dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                      else
                          displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */
  
                  }
              });
          }
      });     
  
      $dialog.dialog('open');
  };
  
  function displayError(message, status)
  {
      var $dialog = $(message);
          $dialog
              .dialog({
              modal: true,
              title: status + ' Error',
              buttons: {
              Ok: function() {
                  $(this).dialog( "close" );
              }
          }
      }); 
      return false;             
  };
      // jQuery Ajax-Post only works in repeatable manner when link that opens SimpleDialog can be placed 
      // outside the PartialView. Otherwise, calls to SimpleDialog fail on second and subsequent clicks. 
      // Need to use full postback in this case.
      $("#btnSubmit").live('click', function (event) {
          event.preventDefault();
          var $target = $(this).attr("name");
          var $url = $("#target").attr("action");
          $.ajax({
              url: $url,
              type: 'POST',
              data: $("#target").serialize(),
              success: function (response) {
                  $.simpleDialog.close();
                  $($target).html(response);
                  $("#ajaxResult").hide().html('Record saved.').fadeIn(300, function () {
                      var e = this;
                      setTimeout(function () { $(e).fadeOut(400); }, 2000);
                  });
              },
              error: function (xhr, status) {
                  $("#ajaxResult").html(xhr.responseText).show();
                  $.simpleDialog.close();
              }
          });
      });
  
      jQuery(document).ready(function () {
          tableToGrid("#table1", { shrinkToFit: false, width: 1000 });
      });
  </code></pre>