title: 0x800a139e - JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
body: <p>I have cancel button that is not working properly on a JQuery Modal Dialog and I would really appreciate some help. 
  This is the exception I'm getting when I click on the cancel button of the modal:</p>
  
  <blockquote>
    <p>0x800a139e - JavaScript runtime error: cannot call methods on dialog
    prior to initialization; attempted to call method 'close'</p>
  </blockquote>
  
  <p>This is the partial view I'm displaying on the modal: </p>
  
  <pre><code>@model Models.Office
  @{  
      Layout = null;
  }
   @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      @Styles.Render("~/Content/bootstrap")
      @Scripts.Render("~/bundles/bootstrap")
      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/themes/base/css")
      @Scripts.Render("~/bundles/modernizr")
  &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function CloseModal() {
          $(this).dialog("close");
          }
  &lt;/script&gt;
  
  
  @*@using (Ajax.BeginForm("EditOffice", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "edit-Dialog" }))*@
  @using (Html.BeginForm("CreateEditOffice", "Admin", "POST"))
  { 
      &lt;fieldset&gt;
          &lt;legend&gt;Office&lt;/legend&gt;
          @if (ViewBag.IsUpdate == true)
          { 
              @Html.HiddenFor(model =&gt; model.OfficeId)
          }
  
          &lt;div class="display-label"&gt;
              @Html.DisplayNameFor(model =&gt; model.OfficeName)
          &lt;/div&gt;
          &lt;div class="Input-medium"&gt;
              @Html.EditorFor(model =&gt; model.OfficeName)
              @Html.ValidationMessageFor(model =&gt; Model.OfficeName)
          &lt;/div&gt;
  
          &lt;div class="display-label"&gt;
              @Html.DisplayNameFor(model =&gt; model.SupportNo)
          &lt;/div&gt;
          &lt;div class="Input-medium"&gt;
              @Html.EditorFor(model =&gt; model.SupportNo)
              @Html.ValidationMessageFor(model =&gt; model.SupportNo)
          &lt;/div&gt;
  
          &lt;div class="display-label"&gt;
              @Html.DisplayNameFor(model =&gt; model.SupportEmail)
          &lt;/div&gt;
          &lt;div class="Input-medium"&gt;
              @Html.EditorFor(model =&gt; model.SupportEmail)
              @Html.ValidationMessageFor(model =&gt; model.SupportEmail)
          &lt;/div&gt;
          &lt;div class="display-label"&gt;
              @Html.DisplayNameFor(model =&gt; model.SupportFax)
          &lt;/div&gt;
          &lt;div class="Input-medium"&gt;
              @Html.EditorFor(model =&gt; model.SupportFax)
              @Html.ValidationMessageFor(model =&gt; model.SupportFax)
          &lt;/div&gt;
  
          &lt;div class="display-label"&gt;
              @Html.DisplayNameFor(model =&gt; model.SupportFtp)
          &lt;/div&gt;
          &lt;div class="Input-medium"&gt;
              @Html.EditorFor(model =&gt; model.SupportFtp)
              @Html.ValidationMessageFor(model =&gt; model.SupportFtp)
          &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;br /&gt;
      &lt;div class="pull-right"&gt;
          @if (ViewBag.IsUpdate == true)
          { 
              &lt;button class="btn btn-primary" type="submit" id="btnUpdate" name="Command" value ="Update"&gt;Update&lt;/button&gt;
          }
          else
          { 
              &lt;button class="btn btn-primary" type="submit" id="btnSave" name="Command" value="Save"&gt;Save&lt;/button&gt;
          }
              &lt;button type="button" id="Cancel" class="btn btn-primary" onclick="CloseModal()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Then this is the scrip on the parent view:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".editDialog").on("click", function (e) {
              // e.preventDefault(); use this or return false
              var url = $(this).attr('href');
              $("#dialog-edit").dialog({
                  title: 'Edit Office',
                  autoOpen: false,
                  resizable: false,
                  height: 450,
                  width: 380,
                  show: { effect: 'drop', direction: "up" },
                  modal: true,
                  draggable: true,
                  open: function (event, ui) {
                      $(this).load(url);
                  },
                  close: function (event, ui) {
                      $("#dialog-edit").dialog().dialog('close');
                  }
              });
  
              $("#dialog-edit").dialog('open');
              return false;
          });
      });   
  &lt;/script&gt;
  </code></pre>
  
  <p>What I'm I doing wrong ????</p>