0x800a139e - JavaScript runtime error: you cannot call methods in a dialog before initialization; tried to call the close method

Question

I have a cancel button that does not work properly in the jQuery Modal Dialog, and I am very grateful for the help. This is the exception that I get when I click the cancel modality button:

0x800a139e - JavaScript runtime error: you cannot call methods in the dialog box before initialization; tried to call the close method

This is a partial view that I show on a modal:

@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") <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script type="text/javascript"> function CloseModal() { $(this).dialog("close"); } </script> @*@using (Ajax.BeginForm("EditOffice", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "edit-Dialog" }))*@ @using (Html.BeginForm("CreateEditOffice", "Admin", "POST")) { <fieldset> <legend>Office</legend> @if (ViewBag.IsUpdate == true) { @Html.HiddenFor(model => model.OfficeId) } <div class="display-label"> @Html.DisplayNameFor(model => model.OfficeName) </div> <div class="Input-medium"> @Html.EditorFor(model => model.OfficeName) @Html.ValidationMessageFor(model => Model.OfficeName) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.SupportNo) </div> <div class="Input-medium"> @Html.EditorFor(model => model.SupportNo) @Html.ValidationMessageFor(model => model.SupportNo) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.SupportEmail) </div> <div class="Input-medium"> @Html.EditorFor(model => model.SupportEmail) @Html.ValidationMessageFor(model => model.SupportEmail) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.SupportFax) </div> <div class="Input-medium"> @Html.EditorFor(model => model.SupportFax) @Html.ValidationMessageFor(model => model.SupportFax) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.SupportFtp) </div> <div class="Input-medium"> @Html.EditorFor(model => model.SupportFtp) @Html.ValidationMessageFor(model => model.SupportFtp) </div> </fieldset> <br /> <div class="pull-right"> @if (ViewBag.IsUpdate == true) { <button class="btn btn-primary" type="submit" id="btnUpdate" name="Command" value ="Update">Update</button> } else { <button class="btn btn-primary" type="submit" id="btnSave" name="Command" value="Save">Save</button> } <button type="button" id="Cancel" class="btn btn-primary" onclick="CloseModal()">Cancel</button> </div> } 

Then this is the script of the parent view:

 <script type="text/javascript"> $(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; }); }); </script> 

What am I doing wrong?

Answer 1

Inline handlers such as onclick="CloseModal()" do not set this inside the called function. You must pass the this inline link:

 onclick="CloseModal(this)" function CloseModal(el) { $(el).dialog("close"); } 

---

Or just attach the handler using jQuery and it will set the this link inside the event handler:

 //instead of onclick="", attach the handler inside DOM ready: $(function() { $('#Cancel').click(CloseModal); }); function CloseModal() { $(this).dialog("close"); } 

This assumes that #Cancel present when the page structure is complete, and that your markup is valid (no duplicate identifiers).

Answer 2

$ (this) .dialog ("close");

instead of "this" use the name of the dialog, for example .. $ ("header"). dialog ("close");

This works for me.

Hello

Bhaskar.