在引导模式框中加载远程数据之前添加等待消息
Posted
技术标签:
【中文标题】在引导模式框中加载远程数据之前添加等待消息【英文标题】:add waiting message before load remote data in bootstrap modal box 【发布时间】:2016-03-11 04:56:20 【问题描述】:我有这段代码用于将远程 php 数据加载到引导模式框中:
$(function()
$(window).bind("resize", function()
if ($(this).width() < 400)
$('#tabs-content').removeClass('col-xs-10').addClass('col-xs-12')
else
$('#tabs-content').removeClass('col-xs-12').addClass('col-xs-10')
).resize();
);
$(function()
$(document).on('click', '.push', function(e)
e.preventDefault();
var id = $(this).attr('id');
$.ajax(
type: 'post',
url: 'details.php', // in here you should put your query
data:
'bookid': id,
'lang': 'fa',
'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
,
success: function(r)
// now you can show output in your modal
$('#bookdetails').modal(
backdrop: 'static',
keyboard: false
) // put your modal id
$('.something').show().html(r);
);
);
);
这对我有用,但我需要在加载数据之前显示加载 message/image
。
如何添加等待消息/图标?!
【问题讨论】:
【参考方案1】:您只需在Ajax call
之前显示image/message
并将其隐藏在success: function(r)
中
假设您有要在模态加载之前显示的图像,例如 HTML 图像
<img class="progress" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" style="display:none;">
在 JS 中,只显示带有 .show()
函数的图像,在 success: function(r)
中模式加载后隐藏是带有 .hide()
函数
$(document).on('click', '.push', function(e)
e.preventDefault();
var id = $(this).attr('id');
$(".progress").show(); // <-- Show progress image
$.ajax(
type: 'post',
url: 'details.php', // in here you should put your query
data:
'bookid': id,
'lang': 'fa',
'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
,
success: function(r)
// now you can show output in your modal
$('#bookdetails').modal(
backdrop: 'static',
keyboard: false
) // put your modal id
$('.something').show().html(r);
$(".progress").hide(); // <-- Hide progress image
);
);
Minimal example with delay and fade
【讨论】:
以上是关于在引导模式框中加载远程数据之前添加等待消息的主要内容,如果未能解决你的问题,请参考以下文章