add waiting message before load remote data in bootstrap modal box - php

Question

I have this code for load remote php data into bootstrap modal box:
$(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);
}
});
});
});
This worked for me But I need to show loading message/image before load data.
How do add waiting message/icon?!

Answer 1

You just need to show image/message before Ajax call and hide it in success: function(r)
Assuming you have image which to show before modal load, image HTML e.g
<img class="progress" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" style="display:none;">
and in JS, just show image with .show() function and after modal load in success: function(r) hide is with .hide() function
$(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