admin管理员组文章数量:1344959
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:
0x800a139e - JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
This is the partial view I'm displaying on the 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 scrip on 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 I'm I doing wrong ????
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:
0x800a139e - JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
This is the partial view I'm displaying on the 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 scrip on 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 I'm I doing wrong ????
Share Improve this question asked May 4, 2013 at 23:50 EdsonFEdsonF 2,8284 gold badges31 silver badges34 bronze badges 1-
Side note: You should use
.dialog({ autoOpen: false })instead of.dialog().dialog('close')– Fabrício Matté Commented May 5, 2013 at 0:00
2 Answers
Reset to default 7Inline handlers such as onclick="CloseModal()" do not set the this inside the function being called. You have to pass the this reference inline:
onclick="CloseModal(this)"
function CloseModal(el) {
$(el).dialog("close");
}
Or just attach the handler with jQuery and it will set the this reference inside of the event handler:
//instead of onclick="", attach the handler inside DOM ready:
$(function() {
$('#Cancel').click(CloseModal);
});
function CloseModal() {
$(this).dialog("close");
}
This assumes #Cancel is present when the page structure is finished rendering and that your markup is valid (no duplicated IDs).
$(this).dialog( "close" );
instead of "this" use name of dialog eg..$("header").dialog("close");
It works for me.
Regards
Bhaskar.
本文标签：
版权声明：本文标题：jquery - 0x800a139e - JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743757814a2533829.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论