Develop Reference

Showing a loading div during a jQuery ajax call

Im trying to show a loading div while waiting for an ajax call to complete. I have tried a couple of methods but cant seem to get anything to work consistently.
with my current code it works if i have a break point on the function that shows the div once the ajax is complete.
Fiddle
var https = 'https://www.googleapis.com/calendar/v3/calendars/';
function HideCheckShowLoading(checkId) {
$("#check_" + checkId).hide('slow', function() {
$("#loading_" + checkId).show('slow');
});
};
function HideLoadingShowCheck(checkId) {
$("#loading_" + checkId).finish().hide('slow', function() {
$("#check_" + checkId).finish().show('slow');
});
};
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading(1);
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function(response) {
//do something
},
error: function() {
//do something else
}
}).done(function() {
HideLoadingShowCheck(1)
});
});
$('#get2').click(function() {
HideLoadingShowCheck(1);
});
});
#check_1
{
background-color:red;
}
#loading_1
{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>
What i would like to happen is,
on the click of a button we hide the check div
we show the loading div
make the ajax call
if successful do something(Reload the contents of the check div)
hide the loading div
show the check div
As said I have tried a few methods that i have found but i repeatedly get stuck with just the loading div shown
Thanks

I believe you may be slightly over-complicating things here. Something simple like this would suffice:
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
},
complete: HideLoadingShowCheck
});
});
If you don't want the HideLoadingShowCheck routine to happen after success or error (standard behavior of complete), you can just move a function call HideLoadingShowCheck(); into your success and error blocks instead of using complete.

When you add () to a function name, it calls it immediately and returns the result. What you want to do is pass the function itself, not the result of the function - and you do that without the ().
There's no need for the $.when (assuming HideCheckShowLoading() doesn't make an ajax call, the jquery animations work differently), and $.ajax returns the promise itself, so you can update your code to:
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
}
})
//.done(HideLoadingShowCheck);
.done(function() { HideLoadingShowCheck(otherparams); })
});
});
I would change the showcheck function to add .finish() incase it's still animating from the showhide:
function HideLoadingShowCheck() {
$("#loading").finish().hide('slow',function () {
$("#check").finish().show('slow');
});
};

How to check if my container fully load is completed?

I have an issue, do not know if it possible or not, how to check if my container is already loaded or not, because sometimes it is being loaded faster, sometimes slower and if it does not succeed in time getting an error in javaScript where gridview some functions are not recognizable(because the gridview is not loaded fast enough). Hope it is clear. Thanks for Your time.
Code:
function LoadPartial(partialUrl, container) {
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
}
});
//.done(function () {
// return;
//});
}

you can use something like this.
$(".container").load(function (){
alert("Loaded :)");
});
Let me know in-case this doesn't work.

You can try using .data()
if ($('#mycontainer').data('loaded')) {
// your code
}

If you mean to find event when data received use "complete" function:
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
},
complete: function() {
console.log('container filled with data');
}
});

when I click on the div that div should get refreshed and refreshed data should be displayed

$(document).ready(function () {
var j = jQuery.noConflict();
j('.refresh').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
I have this code ,but I am confused how to display that div gets refreshed.Please provide me some code or links to refer.I am making site in which I want to update the score when I refresh the div using ajax.

In your ajax request specify dataType:'html' as shown :-
j.ajax({
url: "refresh.php",
dataType:"html",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});

You can user the different state of Ajax please refre Ajax Details Desc
Then put beforeSend() function put any loading gif img
Then on complete() hide or remove that image
and on success return the data to div.

Try putting your function in global scope and add the relevant datatype:
function refreshDiv() {
$.ajax({
url: "refresh.php",
datatype:"html",
cache: true,
success: function (html) {
$(".refresh").html(html);
}
});
}
$(document).ready(function () {
$('.refresh').click(refreshDiv);
$('.refresh').css({
color: ""
});
});
Another suggestion is try replacing $ with your j which you have used for jQuery.noConflict() utility.
A small demo could help you.

.ready not acknowledging AJAX content

I am loading content, mostly images, through this ajax call, and would like to fade the div in only when all of the images are completely loaded. For this reason, I thought that I should use .ready, so that all of the content was loaded before I use jquery to fade it in, but for some reason the images are not completely loaded when the div gets faded in, which makes it seem like it is not waiting for everything to load.
I am basically wanting to build a preload, for this AJAX content
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$(this).ready(function() {
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
Thank you for the help in advance. I am still a beginner.
example:

Edit:
Oh, now I see what's your problem!
When the success() function is fired, you gotta add a .load event to the images inside #content!
You gotta do something like this
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$('#loader').fadeIn('slow');
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$('#content img').load(function(){
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
}

Page with Ajax function does not refresh data

My scripts are working perfectly fine. However, the content does not refresh itself to get new data. Why is it so?
function updateMsg() {
$.ajax({
url: "/recent/notifications/",
cache: false,
success: function(html){
$("#profile_notifarea_msgbox").html(html);
}
});
setTimeout('updateMsg()', 4000);
}
updateMsg();

Your setTimeout can reference updateMsg directly instead of using a string:
var timeout;
function updateMsg() {
$.ajax({
url: "/recent/notifications/",
cache: false,
success: function(html){
$("#profile_notifarea_msgbox").html(html);
timeout = setTimeout(updateMsg, 4000);
}
});
}
updateMsg();
function stopUpdate() {
clearTimeout(timeout);
}
To stop the continuous update you save a reference to the setTimeout in a variable and then call clearTimeout and pass in that variable. In this example, you would just call the function stopUpdate() to cancel the updates.

when you use ajax with jQuery try to always put an error function, in this way you can identify if something is wrong with the request