I have some javascript/jQuery that loads a table on the click of a search button and does not do a page load. Usually when I want to show a loading icon, I would dismiss it once the page has loaded... But there is no page load on this. The user could be on the page for 5 minutes before they search and when they click the search button, the loading icon would appear and once the table has loaded their results, it would dismiss...
Can anyone point me in the right direction to achieve this?
Place a Loading text/image in a div.
<div id="loading" style="display: none;">Loading..</div>
Control the appearance of above div With jQuery ajaxStart & ajaxStop methods.
$(document).ajaxStart(function(){
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
The above method triggers whenever there is an active AJAX call.
Related
I have a form that has multiple pages, on one of the page I’m using a web service to return a value (triggered on the next button) that is then displayed on the next page.
The value return takes over 20 second and want to use an animated gif to let the user know something is happening, I am using a jquery page animation that is normally fired using
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
I have tried $(window).unload(function() nut this seems to fire straight away andnever leaves the animation.
Ideally I would like to fire the animation on the next button:
Next
And run while the web service is getting the information but npo sure hope this is done.
I have tried
$(document).ready(function () {
$('.button').on('click', getAn);
});
function getAn () {
$(".se-pre-con").fadeOut("slow");;
});
But this doesn’t fire. I also don't have acess to modify the html.
Is it possible to use an animated gif like this or is it really only for page loading?
$(window).load(function() {
$('#loading').hide();
$('#container').show();
});
In all my php file, I have above mentioned code for displaying loading icon till the page loads. For example : If I execute index.php, loading icon will be shown till index.php gets fully loaded.If it is redirected to example.php when redirecting, no loading icon is displayed, its fully blank. And if it is redirected fully then loading icon is displayed till that page loads fully.
Expected:
When redirecting to next page, in that meanwhile too I need loading icon to be displayed .
so How to display loading icon between the transition of pages?
The trick is to start the loading icon immediately when the page is unloaded. Then when the new page is loaded, the loading icon must be shown immediately again, only then when the new page is fully loaded the icon can be hidden.
// Show the icon immediatly when the script is called.
$('#loading').show();
// show the icon when the page is unloaded
$(window).on('beforeunload', function(event) {
$('#loading').show();
});
// hide the icon when the page is fully loaded
$(window).on('load', function(event) {
$('#loading').hide();
});
I am using JQuery Mobile to load some content from a different page into an iframe in a popup and displaying that iframe content within that popup on my initial page.
My popup link is as follows:
<a href="#popupBasic" data-rel="popup" data-transition="pop" data-position-to="window">
My popup is defined as follows:
<div data-role="popup" id="popupBasic" data-overlay-theme="a" data-dismissible="false">
Close
</div>
As you can see it has a close button.
I open my popup when a list item in a listview is tapped as follows:
$('#myList').delegate('li', 'tap', function () {
var index = $(this).index();
$("#popupBasic #memberFrame").remove();
$("#popupBasic").append( '<iframe src="/myPage?id=' + index + '" height="400px;" width="100%;" id="memberFrame"></iframe>' );
});
As you can see this loads the page with a specific id based on the index, the popup opens and this content gets loaded in the iframe within the popup.
On my iframe content there is a button and a count, when the button is pressed the page refreshes and the count should be increased. This is done by the server. However while I can see the count is getting increased and the page looks it gets refreshed it appears the content within the iframe is getting cached or something as when the page refreshes the old count is there.
Two things to add to this:
1: If I then manually refresh the iFrame by right clicking on it and selecting the refresh frame option it works OK
2:The popup has a close button on it and when I click this the first time it doesn't close the popup, instead it looks like it refreshes the iframe content and this time the count is correct. Then pressing the close a second time actually closes the popup
The experience in #2 I find very odd and I was wondering if anyone could help point out why this might be occurring?
In my application when i click form submit, service call happens. When the service call happens I need to I need to disable the page conetent til the next page loads.
As i have given cursor:wait the mouse pointer changes to loading symbol and does not allow to click on the page. But still i could use tab and enter or change the values in the page.
Can anyone tell the code to disable page content using transparent image?
You could do that easier than with a transparent image :
$('body.waiting > *').on('click', function(e) {
e.preventDefault();
});
I think that you should only disable the submit input for example :
$('input').attr('disabled', 'disabled');
With a "overlay", add an absolute div at the top of your page :
<div id="overlay" style="position:absolute;background:url('trans.png');left:0;top:0;width:100%;height:100%;display:none;"></div>
And than simply show it when your form is submitted :
$('#overlay').show();
Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.