[英]Bootstrap modal not firing following partial ajax load
I'm using Bootstrap with the latest version of jQuery and am having an issue displaying a modal following a partial update of the page via Ajax. 我正在将Bootstrap与最新版本的jQuery一起使用,并且在通过Ajax对页面进行部分更新后显示模式时出现问题。
The modal fires ok multiple times before the UpdateRegister function runs after 60 seconds, after that I receive a "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'" when I click on the button to open the modal again. 在60秒钟后,该模式会多次触发ok,然后UpdateRegister函数将运行,之后,我会收到一个“ 0x800a01b6-JavaScript运行时错误:当我再次单击该按钮以打开模式时,对象不支持属性或方法'modal'” 。
The button that fires the modal ('#cmdAdd') is outside the Div updated by the Ajax call. 触发模式的按钮('#cmdAdd')在Ajax调用更新的Div之外。
The javascript is as below: javascript如下:
$(function() {
// Display Add Visitor modal
$("#cmdAdd").on("click", function () {
var url = "/Visitor/Add/";
$.get(url, function (data) {
$("#myModal").html(data);
$('#myModal').modal('show');
});
});
// Update register every 60 seconds
setInterval(function () {
UpdateRegister();
}, 60000);
});
function UpdateRegister() {
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var thisDate = month + "/" + day + "/" + year;
var url = "/Visitor/RegisterList?date=" + thisDate + "&filter=current";
$.get(url, function (data) {
$("#RegisterList").html(data);
});
}
HTML is as follows: HTML如下:
<div class="row">
<div class="col-lg-12">
<h2>@Model.Date.DayOfWeek @Model.Date.ToLongDateString()</h2><br />
<div class="btn-group pull-right">
<button type="button" class="btn btn-danger" id="cmdEmergency">Emergency</button>
<button type="button" class="btn btn-default" id="cmdAdd">Add Visitor</button>
<button type="button" class="btn btn-default" id="cmdAddBulk">Add Bulk Visitors</button>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#register" data-toggle="tab">Current Register <span class="label label-success" id="CountIn">@Model.VisitorsIn</span></a></li>
<li><a href="#expected" data-toggle="tab">Visitors Expected <span class="label label-success">@Model.VisitorsExpected</span></a></li>
<li><a href="#all" data-toggle="tab">All Visitors <span class="label label-success" id="CountTotal">@Model.TotalVisitors</span></a></li>
</ul>
<div class="tab-content">
<!-- Visitors currently in the building -->
<div class="tab-pane active" id="register">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="RegisterList">
@Html.Action("RegisterList", new { date = Model.Date, filter="current" })
</div>
</div>
</div>
</div>
<!-- Expected visitors not yet arrived -->
<div class="tab-pane" id="expected">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="ExpectedList">
@Html.Action("RegisterList", new { date = Model.Date, filter="expected" })
</div>
</div>
</div>
</div>
<!-- All visitors for the day -->
<div class="tab-pane" id="all">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="AllList">
@Html.Action("RegisterList", new { date = Model.Date, filter="all" })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal">
<!-- Modal content goes here -->
</div><!-- /.modal -->
How can I ensure that the modal still works after the update? 如何确保更新后模态仍然有效?
I know it sounds trivial but are you possibly missing a reference to bootstrap.js within the AJAX Html? 我知道这听起来很琐碎,但是您可能会缺少AJAX HTML中对bootstrap.js的引用吗? Adding a reference worked for me when I faced the same error. 当我遇到相同的错误时,添加引用对我有用。
I think your #myModal
just disappear when #RegisterList
is set the data. 我认为#RegisterList
设置数据后,您的#myModal
消失了。 You should go to check about it. 您应该去检查一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.