I'm going to be dynamically loading certain information in a modal window via ajax.
I've noticed on other sites that a small circular loading animation will appear in a modal window prior to loading the content. Does anyone know how this effect is achieved and possibly where to find the loading animation?
Thanks
The jQuery $.ajax() method provides for this by allowing you to specify a method to call upon ajax invoke and another method to call upon ajax response. The logical extension of this functionality is displaying a div containing an animated gif in the first call and clearing it in the second call. Here's an example. I do this in my $.ajaxSetup call when setting my ajax call defaults so that all of my ajax calls have the same behavior, but you can implement this at the $.ajax level to have potentially a different type of start/stop behavior depending on situation.
beforeSend: function() {
$('div#ajaxProcessingMessageDiv').show();
},
complete: function() {
$('div#ajaxProcessingMessageDiv').hide();
}
Happy coding,
Maybe consider using this jquery plugin
BlockUI
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
function test() {
$.ajax({ url: 'wait.php', cache: false });
}
$(document).ready(function() {
$('#pageDemo2').click(function() {
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
test();
});
});
A Google search for "ajax loader", "ajax load", "loading animation", etc. brings up http://ajaxload.info/.
Some times it usefull to inform users by notificator jGrowl.
Related
I am currently working with jQuery/Ajax. I wanted to add a spinner when an ajax request is made. My scenario is: There are two tabs in the UI, one is Home and other is Activities. So, when the user click the Activities tab, it will make ajax request to the backend. At this point I wanted to add a loading spinner overlay to the whole page. I am currently using jQuery block UI. I doesn't seem to work with this. I have my code like this:
beforeSend: function (xhr) {
$.blockUI({message: $("#spinner")});
//show the loading spinner.
},
success: function (data) {
//get the data.
},
error: function (error) {
//get the error response.
},
complete: function (jqXHR, textStatus) {
$.unblockUI();
//hide the loading spinner
}
I have my spinner element like this:
<div id="spinner" style="background:url('assets/img/spinner.gif')"></div>
Is there something I am missing here....
Update: (Solved)
The reason was due to the ajax synchronous nature. It locks the browser until the response is received. So, I changed by call to be async. You may want to look here for more discussion. view
According to jQuery BlockUI Plugin's documentation, the message parameter expects an HTML string.
So, you must change that part of your code to:
$.blockUI({ message: $("#spinner").html() });
I'm developing a web based document management for my final year project. The user interacts with only one page and the respective pages will be called using AJAX when the user click the respective tabs (Used tabs for navigation).
Due to multiple user levels (admin, managers, etc.) I've put the javascripts into the correspondent web pages.
When user requests the user request everythings work perfectly except some situations where some functions are triggered multiple times. I found the problem. It is each time the user clicks a tab it loads same scripts as new instance and both of them will be triggered when I call a function.
to load the content I tired
.load and $.ajax(); non of them address the issue.
I tried to put all into the main page at that time my jQueryUI does not work. I tired
$(document).load('click', $('#tab_root li'), function(){});
Same issue remain.
Can anyone help me out this issue?
--Edit--
$(function){
$(document).on('click','#tabs',function(e){
getAjax($(this))
});
}
//method to load via AJAX
function getAjax(lst){
var cont = $(lst).text();
$.ajax({
url:'../MainPageAjaxSupport',
data: {
"cont":cont
},
error: function(request, status, error){
if(status==404){
$('#ajax_body').html("The requested page is not found. Please try again shortly");
}
},
success: function(data){
$('#ajax_body').html(data);
},
});
}
You can't undo JavaScript after it has been executed by simply unloading the file or removing the script element.
The best solution would probably be to set a variable in each JavaScript file you include in your ajax data and include them from an online inline JavaScript inside the ajax data along with a conditional like such:
<script>
if(!tab1Var) $.getScript("filename");
<script>
Older Solutions
You can manually unbind each event before setting them with off.
$(function){
$('#tabs').off('click');
$('#tabs').on('click',function(e){
getAjax($(this));
});
}
Alternatively you can initialize a global variable (eventsBound1=false) for each tab in the main html:
$(function){
if(!eventsBound1){
$('#tabs').on('click', function(e){
getAjax($(this));
});
eventsBound1 = true;
}
}
The tabs click event is only an example you have to do this for each time you bind an event in the scripts that are being reloaded.
if all the events are bound to things inside ajax_body, a final thing you can try is:
success: function(data){
$('#ajax_body').empty();
$('#ajax_body').html(data);
},
You have bind an event click on 'document' so getAjax() only replace the '#ajax_body' not the 'document'.
This means old event is still attached to the 'document' all you need is to unbind event by using $(document).off('click'); or change 'document' to other elements.
In jQuery Mobile, if user clicks on a button, a loading icon appears and then it loads the new webpage via Ajax.
But, The server may be not respond in my case. Isn't there any way to put a timeout (e.g. 10 seconds) for ajax navigation feature? (If time limit exceeds, stop trying to navigate and show an error message)
To set a timeout i think you should not do it in a static way ( using "data-transition" )
you can make a listener to the link ('onclick') and within the listener make an ajax call to load your page. Use $.mobile.changePage() to do that.
The $.mobile.changePage() function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its href attribute is normalized and then $.mobile.changePage() handles the rest.
so your code could seem like this :
$('#link_id').click(function() {
$.ajax({
url: "page_served_from_server",
error: function(jqXHR, strError){
if(strError == 'timeout')
{
//do something. Try again perhaps?
}
},
success: function(){
//charge your page :
// $.mobile.changePage('yourPageAdress',"turn",false,true);
},
// here you can specify your timeout in milliseconds
timeout:3000
});
});
I have a page with 2 separate forms that can be submitted via Ajax (jQuery). For each of these forms I'd like to show a loading indicator to the user. I have found a nice piece of code that can easily show these icons, but it only works when there's 1 form.
$('.ajaxloader').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
ajaxloader is a class which shows the loading image as a CSS background image. To use it, I just need to add something like: <span class="ajaxLoader">Busy ...</span>
When I test this with my page (that has 2 forms), and I submit one of the two, then both loading indicators appear (which is quite obvious). Now my question is, how can I show the indicator that needs to be shown? I was thinking about giving the span-tag an id attribute, but then I don't know how to proceed. I want this to be as generic as possible, so I don't have to hardcode and duplicate code a lot.
Thanks!
You could attach the "show loading indicator" callbacks to the Ajax queries themselves, not do a 'catch-all' like your current solution.
Something like this in your $.ajax() call:
$.ajax("/form1/target", {
beforeSend: function() {
$(".ajax-loader-1").show();
},
complete: function() {
$(".ajax-loader-1").hide();
}
});
(And a similar one for your second form, wherever the Ajax call for that is defined)
Have you thought about starting it when your form is submitted and hiding the other.
$('.yourSubmitButton').click(function () {
$(this).parent().find('.ajaxLoader').show();
});
$('.ajaxloader').hide().ajaxStop(function () {
$(this).hide();
});
So the loader will show inside the form that has just been submitted (I assume you are doing a submit with a button or a link?) then both are hidden again when the ajax request stops.
I have an ajax loader much like this one:
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
if(showSpinner == true){
$(this).show();
}
else{
showSpinner = true;
}
})
.ajaxStop(function() {
$(this).hide();
})
;
from: How to show loading spinner in jQuery?
edited after updates
I initialize showSpinner = true, and set it to false immediately before my recurring ajax call. It works most of the time but sometimes the spinner won't show up when its supposed to. I've polled the value of showSpinner and it looks like it remains false for too long between when its set and when it's set back to true.
It works wonderfully, but I also have a recurring ajax call that is executed every 15 seconds, and I don't want the ajax loader to appear for that one. I've tried this:
showSpinner = false;
// make ajax call to the database to check for new photos
$.ajax('/url', {
type:"post",
data: data,
success: function(response){
}
});
and it will prevent the spinner from appearing, but sometimes it disables the spinner for the other ajax calls too (other times it works fine). I've tried moving the re-enabling of the spinner to beforeSend but it didn't help. When the setInterval call that executes the code above is removed, it fixes the problem.
My other option is to include the spinner every place an ajax call occurs, but I'd prefer the more generic solution. Does anyone know how to get around this?
Thanks.
This sounds very similar, if not identical, to my own question about disabling certain ajax event handlers. This answer may be useful to you.