I have a Bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator? Does twitter bootstrap provide this functionality by default?
EDIT: JS code for modal
<script type="text/javascript">
$('#myModal').modal('hide');
$('div.divBox a').click(function(){
var vendor = $(this).text();
$('#myModal').off('show');
$('#myModal').on('show', function(){
$.ajax({
type: "GET",
url: "ip.php",
data: "id=" + vendor,
success: function(html){
$("#modal-body").html(html);
$(".modal-header h3").html(vendor);
$('.countstable1').dataTable({
"sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aaSorting":[[0, "desc"]],
"iDisplayLength": 10,
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "pdf"]
}
});
}
});
});
});
$('#myModal').on('hide', function () {
$("#modal-body").empty();
});
</script>
I solved the same problem following this example:
This example uses the jQuery JavaScript library.
First, create an Ajax icon using the AjaxLoad site.
Then add the following to your HTML :
<img src="/images/loading.gif" id="loading-indicator" style="display:none" />
And the following to your CSS file:
#loading-indicator {
position: absolute;
left: 10px;
top: 10px;
}
Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});
This solution is from the following link.
How to display an animated icon during Ajax request processing
I'm guessing you're using jQuery.get or some other jQuery ajax function to load the modal. You can show the indicator before the ajax call, and hide it when the ajax completes. Something like
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
There is a global configuration using jQuery. This code runs on every global ajax request.
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
<img src="themes/img/ajax-loader.gif"></img>
</div>
<script type="text/javascript">
jQuery(function ($){
$(document).ajaxStop(function(){
$("#ajax_loader").hide();
});
$(document).ajaxStart(function(){
$("#ajax_loader").show();
});
});
</script>
Here is a demo: http://jsfiddle.net/sd01fdcm/
A loading indicator is simply an animated image (.gif) that is displayed until the completed event is called on the AJAX request. http://ajaxload.info/ offers many options for generating loading images that you can overlay on your modals. To my knowledge, Bootstrap does not provide the functionality built-in.
This is how I got it working with loading remote content that needs to be refreshed:
$(document).ready(function () {
var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';
// This is need so the content gets replaced correctly.
$("#myModal").on("show.bs.modal", function (e) {
$(this).find(".modal-content").html(loadingContent);
var link = $(e.relatedTarget);
$(this).find(".modal-content").load(link.attr("href"));
});
$("#myModal2").on("hide.bs.modal", function (e) {
$(this).removeData('bs.modal');
});
});
Basically, just replace the modal content while it's loading with a loading message. The content will then be replaced once it's finished loading.
This is how I realised the loading indicator by an Glyphicon:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
.gly-ani {
animation: ani 2s infinite linear;
}
#keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>
</div>
</body>
</html>
Related
I added a preloader to my website and the preloader animation will play every time the site is visited. I would like it to only play once per visit when going through the domain name - any clicks on the home button on the site or back button in the browser I would like to have the preloader skipped. I would like it to show up any time it is opened in a new tab, or new browser window. I tried adding cookies, but i'm still not connecting it correctly somehow.
Some things to add:
The preloader is made of css #keyframes, (.loader) - its not a .gif.
My site's domain is jonrouse.com for reference.
HTML
<div class="preloader">
<div class="loader">
<div class="loader-inner"></div>
</div>
</div>
CSS
.preloader {
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:99;
margin:0 auto;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
function Preloader() {
var preloader = $ ('.loader');
preloader.delay(1000) .fadeOut (500);
var preloader = $('.preloader');
preloader.delay (1500) .slideUp(500);
}
Preloader();
});
});
</script>
Any help would be greatly appreciated. If you need any extra info, let me know.
Here is an example of how you might use sessionStorage to show the preloader once per visit per tab or window.
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
function Preloader() {
var preloader = $ ('.loader');
preloader.delay(1000) .fadeOut (500);
var preloader = $('.preloader');
preloader.delay (1500) .slideUp(500);
}
if ( ! sessionStorage.getItem( 'doNotShow' ) ) {
sessionStorage.setItem( 'doNotShow', 'true' );
Preloader();
} else {
$ ('.loader, .preloader').hide();
}
});
});
</script>
Opening a jQuery Mobile popup programmatically results in a javascript runtime error.
0x800a138f - JavaScript runtime error: Unable to get property 'nodeName' of undefined or null reference
I've tested with both IE and Chrome, which have similar results.
<div data-role="popup" id="myPopup" data-overlay-theme="b" data-theme="c" data-dissmissible="false" class="ui-corner-all">
<div data-role="header"><h1></h1></div>
<div data-role="content" data-theme="a" class="ui-corner-all ui-content">
<p id="myPopupText">test test</p>
</div>
</div>
<script type="text/javascript">
$("#main").on("pageinit", function () {
$("#myPopup").popup("open", { transition: "slideup" });
});
</script>
I've also tried with .popup() before .popup("open"). Debugging in VS2015 I see that the popup is displayed, but while running it disappears again when the exception is fired.
What's causing this exception, and how may I fix it?
Do you want to open the popup just the first time the page is loaded? if so use $(document).on(... and try a slight delay:
$(document).on("pageinit","#main", function(){
setTimeout(function(){
$("#myPopup").popup("open", { transition: "slideup" });
}, 10);
});
Do you want it to popup each time the page is visited.? Use the pagecontainer widget transition event:
$(document).on( "pagecontainertransition", function( event, ui ) {
if (ui.toPage.prop("id") == "main"){
setTimeout(function(){
$("#myPopup").popup("open", { transition: "flip" });
}, 10);
}
});
Do you want to launch the popup after the page has loaded in response to a user action?
$(document).on("pagecreate","#main", function(){
$("#btnPop").on("click", function(){
$("#myPopup").popup("open", { transition: "flip" });
});
});
DEMO
I loading external website (my own) using Jquery.
<div id="siteloader"><center>
<img style="width: 100px; height: 100px;" src="http://seafood.greenpeaceusa.org/images/spinner.gif" alt="Mountain View" /></center></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$( document ).ready(function() {
$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">');
});
</scirpt>
As you can see right now, I am loading spinner gif inside the div and replacing the content of the div with the external website html, However it is replacing it on the moment it is downloading the website can I make it wait untill the website is downloaded and only then replace the html ?
By the way, .load method is not working for me for some reason =\
Your object replaces content of the div at document.ready. It should be done when the object is loaded.
<script>
$( document ).ready(function() {
//$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">'); syntax errors here
//this doesn't work as well
$('<object "width:100%; height:2000px; data="http://example.com/findex.php">')
.load(function(){
$("#siteloader").empty().append(this);
});
});
</script>
Fixed working script:
<script>
$( document ).ready(function() {
/*
//wrong again spinner disappear before object loaded
$('<object style="width:100%; height:400px; display:none;" data="http://www.w3schools.com/tags/helloworld.swf" />')
.appendTo($("#siteloader"))
.after(function () {
console.log('loaded');
$(this).show().siblings().each(function () {
$(this).remove();
});
});
*/
//and this work for sure
var obj = document.createElement('object');
obj.onload = function () {
console.log('loaded');
$(this).css({ width: '100%', height: '400px' }).show()
.siblings().each(function () {
$(this).remove();
});
};
obj.data = 'json.php';
$(obj).appendTo('#siteloader');
});
</script>
I hope it will work with your data as well. This looks ugly (mix jquery and pure JS) but this is the only found way to make it work. $(obj).appendTo('#siteloader') triggers the load.
Just in case, PHP used:
<?php
usleep(10000000);
echo '{"name":"qwas","qty":10,"curr":"'.date('h:i:s').'"}';
?>
I am trying to show a loader GIF image in the div section of this html page. But I can't get it to work. The div content is hidden and the GIF image disappears.
CSS:
.loader {
background-image: url(image/Preloader_8.gif);
background-repeat: no-repeat;
height:100px;
width:200px;
}
JavaScript:
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
Html:
<body>
<div class="loader">
Loading Image
</div>
</body>
Are you using AJAX to fetch the content in div or simply .load function?
In case of .load() jQuery event,
$( ".loader" ).load( "test.html", function() {
$(".loader").fadeOut("slow");
});
In case of AJAX request, call the function loader in success event of AJAX call.
function loader() {
$(".loader").fadeOut("slow");
});
HTML
<body>
<div class="loader" style="display:none">
Loading Image
</div>
</body>
js
$(window).load(function() {
$(".loader").fadeOut("slow");
})
Please add the following script on the top of your web page
$(".loader").fadeIn();
Add loading div on top of just above script
I think the reason why your code:
$(window).load(function() {
$(".loader").fadeOut("slow");
})
didn't work is because the script is executed after the document is fully loaded.
Following code works.
if (document.readyState == 'complete') {
$(".loader").fadeOut("slow");
} else {
$(window).load(function () {
$(".loader").fadeOut("slow");
})
}
jsfiddle
In your code, the loader class is assigned to the div section, so when you trigger the fade out of the loader page, the entire div assigned to the class fade's out. So better have internal div to which the loader is assigned. This may help check out
<body>
<div class="Image">
<div class="loader">
Loading Image
</div>
</div>
</body>
Working example here
The simplest way of showing loader.gif on web page as:
<div id="divloader" class="ShowLoader">
<img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." />
</div>
CSS code
<style>
.loaderIMG {
padding: 10px;
position: fixed;
top: 45%;
left: 45%;
width: 80px;
}
.HideLoader {
display: none;
}
</style>
jQuery code:
$(document).ready(function () {
$("#divloader").addClass("HideLoader");
});
First check that your jQuery library working or not by showing alert msg, and then check that image path from browser inspect element.
Add this code:
$(document).ready(function(){
$(".loader").fadeOut("slow");
})
jsfiddle
Is there a way to show a loading spinner while my javascript is running?
I want toshow something to the user while the page is waiting.....
This is taking about 5-6 secs..so I want to show a spinner or box while its waiting
$.each(ARRAY, function(key, item){
//IM DOING SOME LOGIC HERE
});
Add a hidden loading image in your page, display it when you start you function and hide it again when the function completes.
<img src="loading image " id="loading">
function(){
$("#loading").show();
your logic
$("#loading").hide();
}
This is just the first thing that came to mind. Probably not the best solution. But it does the job.. You could define a loading div and hide it by default. Then, while the each is doing its thing, show the loading div. So something like:
CSS:
.hidden{display:none;}
HTML:
<div class="loading hidden"></div>
JavaScript:
function(){
$('.loading').removeClass('hidden');
$.each(ARRAY, function(key, item){
});
}
Try this. Works for me with a bootstrap 5.2 spinner, with the following referenced in the html:
bootstrap 5.2 stylesheet
referencing the bootstrap bundle script
jquery script
$function doLogic() {
$("#loadingImg").css('visibility','visible');
setTimeout(function() { // allow spinner to load before work starts
// logic here to load page
$("#loadingImg").hide();
},5000); //5000ms = 5secs
}
#loadingImg {
width: 3rem;
height: 3rem;
align-self: center;
visibility: hidden;
}
<div id="spinnerContainer">
<div id="loadingImg" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
This may be helpful for AJAX logic:
<img id="loadingImg" src="loding.gif"/>
$('#loadingImg')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/ajaxStop functions will fire whenever you do any AJAX calls and displays the loading spinner.
Alternatively, this may be helpful too:
function doLogic() {
$('#loadingImg').show();
setTimeout(function() { // allow spinner to load before work starts
// logic here
},500);
$('#loadingImg').hide();
}