Bootstrap模式加载远程内容,生成2个请求
Bootstrap modal loading remote content generating 2 requests
我正在使用引导模式远程加载数据,由于某种原因,该请求将两次发送到服务器,然后扰乱了模式的视图。
模态
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-dialog-middle modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<i class='fa fa-refresh fa-spin fa-5x'></i>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" id="@series.Id" href="@Url.Action("GetEpisodes")?id=@series.Id&title=@(Url.Encode(series.Title))" data-target="#myModal">@series.Title</a>
加载后的模态内容
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="episodeModal">@Model.SeasonTitle</h4>
</div>
<div class="modal-body">
@foreach (var kvp in Model.EpisodeViewModels)
{
<div class="panel panel-default">
<div class="panel-heading panel-grid">
@*<h4 class="panel-title">Season @kvp.Key</h4>*@
<h4 class="col-md-1 panel-title-small text-left"></h4>
<h4 class="col-md-6 panel-title-small text-center">Title</h4>
<h4 class="col-md-2 panel-title-small text-center">Downloaded</h4>
<h4 class="col-md-2 panel-title-small text-center">Air Date</h4>
<h4 class="col-md-1 panel-title-small text-left">Search</h4>
</div>
<div class="panel-body">
<small>Season @kvp.Key</small>
<div class="divider"></div>
@foreach (var ep in kvp.Value)
{
<div class="row">
<div class="col-md-1 text-center">@ep.EpisodeNumber</div>
<div class="col-md-6">@ep.Title</div>
<div class="col-md-2 text-center">@Html.Raw(ep.HasFileIcon)</div>
<div class="col-md-2 text-center">@ep.AirDate.ToShortDateString()</div>
<div class="col-md-1 text-center"><i class="fa @FontAwesome.Search"><a class="episodeId" href="#" id="@ep.ID"></a></i></div>
</div>
}
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
JavaScript处理加载多个远程数据
$(function() {
$("a[data-target=#myModal]").click(function (ev) {
console.log("clicked");
ev.preventDefault();
var target = $(this).attr("href");
// load the url and show modal on success
$("#myModal .modal-body").load(target, function() {
$("#myModal").modal("show");
$('#myModal').modal('handleUpdate');
});
});
});
请注意,如果没有上面的JS代码,问题就会发生
我如何才能阻止这种情况的发生,并使其只生成1个请求?
如果手动为modal添加事件处理程序,则不希望在页面加载时自动执行相同操作的元素上设置data-
属性。
从元素中删除data-toggle
属性。
bootstrap.js库查找这些属性并相应地分配事件处理程序
相关文章:
- davis.js在页面加载/重新加载上生成两个请求
- 如何使用 Gulp 和 gulp 数据从单个 jade 模板生成多个 html 文件
- 如何生成多个SVG's在Meteor.js#每个包装中
- Javascript-在没有循环的情况下生成多个随机数
- 如何生成多个精灵?(Javascript)
- 使用D3.js从单个数据点生成多个DOM元素
- 一键生成 2 个事件
- 如何在 UI 应用程序中生成多个下拉列表框
- 生成两个具有特定总和的数字
- 在Wordpress后端生成多个字段
- 无法在 d3.js 中的同一页面上生成两个饼图
- JavaScript 生成 50 个不重复的随机数
- 在 Javascript 中生成多个 JSON 对象数组
- 生成 4 个随机数,这些随机数在 Javascript 中添加到某个值
- 在一个区间之间生成两个随机数组
- 如何使用一个声明生成多个常量
- 更新 d3 中的条形图以生成多个图表
- 如何在 1-10 之间生成 4 个随机数并宣布一个获胜者(Javascript)
- 生成 N 个 url 以发出 AJAX 请求
- 如何在setInterval函数中生成第二个参数(持续时间)的随机持续时间值