We Keep Coding

Unable to use Ajax beforeSend and complete functions

I am trying to load the spinner image during ajax data loading hower none of my codes seem to work. Here is my code :
$.ajax({
url: '/Observer/GetInfoProfileByProfileId',
type: 'POST',
data: {
ProfileId: profileId,
},
beforeSend: function() {
console.log('spinner shown');
$('#spinner').css('display', 'block');
},
complete: function() {
console.log('spinner hidden');
$('#spinner').css('display', 'none');
},
success: function(response) {
//..do something with response
}
});
What is wrong with the codes above ? Appreciate any help

It is working, the issue i misspelled the name of my id in the html

How to add a loading screen when doing a AJAX call in Phonegap?

Title pretty much says it. How do I add a loading screen when AJAX is running and make the loading screen disappear when it AJAX has finished running?
My AJAX function:
$("#loginBtn").on("click", function(e){
e.preventDefault();
var loginForm = document.getElementById("loginForm");
var login_data = $('#loginForm').serialize();
$.ajax({
type: "POST",
url: serverURL + "loginProcess.php",
data: login_data,
dataType:"json",
success: function(data){
localStorage.setItem('id', JSON.stringify(data));
},
error: function(jqXHR, textStatus, errorThrown) {
navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done');
}
});
});
Note: I'm not using jQuery Mobile.

To globally show a loading page on every ajax call you can use this code:
$( document ).ajaxStart(function() {
$( "#loading" ).show();
});
and hide it when the ajax calls stop
$( document ).ajaxStop(function() {
$( "#loading" ).hide();
});
you need a full screen div with the id loading, and a loading image gif or something like that

Don't forget to use async:true and use $.mobile.loading("show"); for loader showing
jQuery.ajax({
url: serverURL + "loginProcess.php",
global: true,
type: "POST",
data: login_data,
dataType:"json",
async: true,
timeout: 40000,
beforeSend: function() {
$.mobile.loading("show");
},
complete: function(){
$.mobile.loading("hide");
},
success: loading_complete_list,
});

You can use jQuery BlockUI Plugin
Your code would be
var blockUI = function(){
$.blockUI({
fadeIn: 1000,
timeout: 0,
message:'<h1>Loading...</h1>',
//css: { border: '5px solid red'},
onBlock: function() {
$("#tab3").addClass("myClass");
}
});
}

$("#loginBtn").on("click", function(e){
e.preventDefault();
var loginForm = document.getElementById("loginForm");
var login_data = $('#loginForm').serialize();
$.ajax({
type: "POST",
url: serverURL + "loginProcess.php",
data: login_data,
dataType:"json",
beforeSend:function(){
blockUI(); //Call block function
},
success: function(data){
localStorage.setItem('id', JSON.stringify(data));
},
error: function(jqXHR, textStatus, errorThrown) {
navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done');
}
});

Jquery Ajax call inside Jquery Ajax call

I'm loading a part of a page using ajax with this script:
<script type="text/javascript">
$(document).ready(function(){
$('#btn_new').live('click',function(){
var parameter = 1;
$.ajax({
type: "POST",
url: "new_message.php",
data: {
parameter:parameter,
},
success: function(msg)
{
$("#lib_container").ajaxComplete(function(event, request, settings)
{
$("#lib_container").html(msg);
});
}
});
});
});
</script>
Inside the lib_container div I have a text input with this script:
<script type="text/javascript">
function searchUsers(str) {
$.ajax({
type: "POST",
url: "users_ajax.php",
data: {
search:str
},
success: function(msg)
{
//console.log(msg);
//$("#users_lst").html(msg.response);
$("#users_lst").ajaxComplete(function(event, request, settings)
{
$("#users_lst").html(msg);
});
}
});
}
</script>
When I load some text in the input, the second ajax script loads the msg variable in the div but then also reloaded the lib_container div.
I've tried many ways to prevent the lib_container ajax trigger but it was in vain. Just putting the input in new page works correctly.
Can anyone help me solve this?
Thanks.

Your problem seems to be that you are registering a new ajaxComplete handler every time you get a successful response from the ajax call. Since it seems like you want to update the html, I'm not sure why you need those ajaxComplete handlers anyway.
Try it like this:
$(document).ready(function(){
$('#btn_new').live('click',function(){
var parameter = 1;
$.ajax({
type: "POST",
url: "new_message.php",
data: { parameter:parameter },
success: function(msg) {
$("#lib_container").html(msg);
}
});
});
});
And by the same token:
function searchUsers(str) {
$.ajax({
type: "POST",
url: "users_ajax.php",
data: { search:str },
success: function(msg) {
$("#users_lst").html(msg);
}
});
}
On another note, .live is deprecated and you really ought to be using ajax promises rather than a success callback. See the jQuery api for more info on that.

Page Loading Image after multiple ajax call

I have given a loading image binded to ajax start/stop functions like this..
$('#LoadingImage').bind('ajaxStart', function(){
$(this).show();
}).bind('ajaxStop', function(){
$(this).hide();
});
Now i have many ajax calls on my page under document.ready().so all ajax calls start at the same time..but ajax stop varies according to the results in the ajax..so what happens is
loading image appears and when one ajax call is complete the image is hidden and shows my main screen.. Is there a way to loading image till the final ajax call is complete ???
<script type="text/javascript">
$(document).ready(function () {
$('#LoadingImage').on('ajaxStart', function(){
$(this).show();
}).on('ajaxStop', function(){
$(this).hide();
});
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
Like the above i have many ajax calls...The problem is that after the first ajax is complete the image hides..

You can set up one variable which increments on Ajax start and decrements on Ajax complete.
Inside the ajaxStop function check whether this variable is 0 or not.If zero then only hide the image.
Do like this,
$(document).ready(function () {
var count=0;
$('#LoadingImage').on('ajaxStart', function(){
count++;
if(count===1){
$(this).show();
}
}).on('ajaxStop', function(){
//count is decrementing and on same time checking whether it becomes zero
if(!--count){
$(this).hide();
}
});
//suppose 10 simultanious ajax calls
for(var j=0;j<10;j++){
$.ajax({
//configure whatever you want
});
}
});
this should work (theoretically).

Show a loading bar using jQuery while making multiple AJAX request

I have function making multiple AJAX request with jQuery like:
function() {
$.ajax({
url: "/url",
data: {
params: json_params,
output: 'json'
},
async: false,
success: function(res) {
data1 = res
}
});
$.ajax({
url: "/url",
data: {
params: json_params,
output: 'json'
},
async: false,
success: function(res) {
data2 = res;
}
return data1 + data2;
});
}
While this function is running and data is loading I want to display a loading image without blocking it.
I have tried showing the loading icon using ajaxSend ajaxComplete, but does not work, since I have multiple ajax calls.
I also tried showing the loading at the beginning of the function and hiding at the end of the function, but failed.
How to do this?

How exactly did you try loading? Using the ajaxStart/ajaxStop events on the elements is one way to accomplish what you want. It could look like this:
$('#loadingContainer')
.hide() // at first, just hide it
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
Maybe this helps you, I often used this before and it works like a charm..

I think the answer is really a combination of several of these. I would begin with ajax start to show the loading image at 0 (or whereever you want the start to be). Then I would use a callback function to increment the loading bar and repaint it.
For example
//when ajax starts, show loading div
$('#loading').hide().on('ajaxStart', function(){
$(this).show();
});
//when ajax ends, hide div
$('#loading').on('ajaxEnd', function(){
$(this).hide();
});
function ajax_increment(value) {
//this is a function for incrementing the loading bar
$('#loading bar').css('width', value);
}
//do ajax request
$.ajax({
url:"", //url here
data: {params:json_params,output:'json'},
async: false,
success: function (res) {
data1=res
ajax_increment(20); //increment the loading bar width by 20
}
});
$.ajax({
url:"", //url here
data: {params:json_params,output:'json'},
async: false,
success: function (res) {
data1=res
ajax_increment($('loading bar').css('width') + 10); // a little more dynamic than above, just adds 10 to the current width of the bar.
}
});

You could try something like this: Define a callback with a counter, and the callback hides the image after it's been called the required number of times.
showLoadingImage();
var callbackCount = 0;
function ajaxCallback() {
++callbackCount;
if(callbackCount >= 2) {
hideImage();
}
}
$.ajax({
url:"/url",
data: {params:json_params,output:'json'},
async: false,
success: function (res) {
data1=res
ajaxCallback();
}
});
$.ajax({
url:"/url",
data: {params:json_params,output:'json'},
async: false,
success: function (res) {
data2=res;
ajaxCallback();
}
});
That's only necessary for asynchronous calls, though. The way you're doing it (all your AJAX calls are synchronous), you should be able to just call hideImage() before returning at the end of your outer function.

You should be able to bind to the start and then end with the following:
$('#loading-image').bind('ajaxStart', function() {
$(this).show();
}).bind('ajaxStop', function() {
$(this).hide();
});
Or you could use beforeSend and on Complete
$.ajax({
url: uri,
cache: false,
beforeSend: function() {
$('#image').show();
},
complete: function() {
$('#image').hide();
},
success: function(html) {
$('.info').append(html);
}
});