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');
});
};

jQuery hide and show from do not work

I have the following in a event:
function onclickEvent () {
$.ajax({
url: "somePage.html",
beforeSend: function( xhr ) {
$('#Element1').hide("slow",function() {
$('#Loading').show("slow");
});
}
}).done(function( data ) {
$('#Loading').hide("slow",function() {
$('#Element1').show("slow");
});
});
}
First time works well but the second time (second click) in "Done" ajax the loading does not hide, always is visible.
What am I doing wrong?

You hid Element1 first, so you need to show it first on success/done. show() paired with hide() and vice versa seem to base the toggling on precedence. It seems to be the behavior. You may want to further read the documentation of these functions.
<script src="jquery.min.js"></script>
<script>
function onclickEvent () {
$.ajax({
url: "somePage.html",
beforeSend: function( xhr ) {
$('#Element1').hide("slow",function() {
$('#Loading').show("slow");
});
}
}).done(function( data ) {
$('#Element1').show("slow", function() {
$('#Loading').hide("slow");
});
});
};
</script>
<div id="Element1" style="display:block;">
Element 1
</div>
<div id="Loading" style="display:none;">
Loading
</div>
<button onclick="onclickEvent();">Click Me</button>
Using success
function onclickEvent () {
$.ajax({
url: "somePage.html",
beforeSend: function( xhr ) {
$('#Element1').hide("slow",function() {
$('#Loading').show("slow");
});
},
success: function( data ) {
$('#Element1').show("slow", function() {
$('#Loading').hide("slow");
});
}
});
};

It looks like there are couple of things that need to be modified to get this to work the way I think you want it to work.
The beforeSend setting in the $.ajax() function is intended to give you a place to modify the request before you send it. This probably isn't the best place to call the first animation functions.
The animation callbacks and ajax callbacks seem to be causing a race condition -- it looks like it's possible for the ajax request to return while the initial animations are still running, which means that the #Loading element is shown when it should be hidden.
This example assumes that the #Loading element should be hidden by default when the page loads and that the elements should revert to their initial state even when the ajax request fails (always instead of done).
$(function() {
$('#button').on('click', function() {
$('#Element1').hide('slow', function() {
$('#Loading').show('slow', function() {
$.ajax({
url: 'somePage.html'
})
.always(function(data) {
$('#Loading').hide('slow', function() {
$('#Element1').show('slow');
});
});
});
});
})
})
#Loading {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Element1">
Element1
</div>
<div id="Loading">
Loading
</div>
<button id="button">
Button
</button>
What's happening here is that when the button is clicked, the toggling animations (hide() and show()) are run, then the ajax request is sent as a callback from the show() animation so that the request doesn't go out until the #Loading element is visible.

dynamic elements and click events not firing

I'm generating elements from a list and each of these will have a click event.
This is all in the same partial view that gets refreshed every X seconds elapsed.
The first initial load doesn't work. Every auto refresh of the partial after works fine.
all (document).ready events fire.
Other code outside of the click events fire just fine.
Loop in view
<div id="#overview.GroupType.Name" class="tile #overview.AlertType.MetroBG ui-widget-content draggable" data-role="tile" style="z-index: 2;">
<div class="tile-content iconic" style="z-index: 2;">
<span class="icon #overview.AlertType.MetroImage #overview.AlertType.MetroFG"></span>
<span class="tile-badge #overview.AlertType.MetroBadgeBG #overview.AlertType.MetroBadgeFG">#overview.BadgeCount.ToString()</span>
<span class="tile-label no-padding fg-white">#overview.GroupType.Description</span>
</div>
</div>
loop in script section of (document).ready generates the following
$('##overview.GroupType.Name').on("click", function () {
alert('click');
$.ajax({
type: 'GET',
url: '#Url.Action("LoadDetail", "Home")',
dataType: 'html',
data: { 'groupName': '#overview.GroupType.Name' },
async: true,
cache: false,
success: function (data) {
$("#monitorDetail").html(data);
},
error: function (xhr, status) {
}
})
});
I read a few posts saying you have to use .on("click" ...) so I'm not sure what else to look into.

$('body').on('click', '##overview.GroupType.Name', function(){
// do stuff here
});
You could replace the body selector with the non-dynamic parent of your dynamic div . I hope that makes sense.

That's what I got from your question, but still a bit confusing:
1) You are loading something dynamically using ajax into the main view every 5s.
2) When this happens you need to bind events to something inside this dynamic content.
3) It's not working (dahh for sure not, you asked us).
Solution:
You must bind any event after the Partial Refresh, at the success method. Why? Because you have changed the DOM and the first $('document').ready did't find out this content loaded with ajax at the first time.
$('##overview.GroupType.Name').on("click", function () {
alert('click');
$.ajax({
type: 'GET',
url: '#Url.Action("LoadDetail", "Home")',
dataType: 'html',
data: { 'groupName': '#overview.GroupType.Name' },
async: true,
cache: false,
success: function (data) {
$("#monitorDetail").html(data);
//Bind the events to for anything after loading the content
},
error: function (xhr, status) {
}
})
});
And this script above will work only if the script is inside the main view, because It's need Razor Server Render to build the id '##overview.GroupType.Name'. You can't have dynamic script at the partial. Ajax will not execute this scripts.

How To Call Function on page Loading

I'm Using Web service using AJAX Call In My HTML Page . Web Service Returning Data Nearly 30 to 40 second's .
During This Loading Time I Need to Use Some Loading Gif Images After Data Completely Received Form Web Service The Loading Image Must Be Hide.
I'm Using Only HTML,JAVASCRIPT,CSS,J Query.
Any Idea Or Samples Needed.
I'm Using Following Code
$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
In The Above Code My Problem Is On Page Load Gif Image Show But It's Not Hide Only Gif Image Only Showing.

Put a hidden image on your page and as soon as your ajax call is made, make that image visible
$('#image').show();
$.ajax({
complete: function(){
$('#image').hide();
}
});
and hide that image again on Complete of Ajax call.

Use your ajax request callback (on success/failure) instead of page load.

When sending the request just show a gif animation by setting the Display to block
then when you have the data set the display to none
or use jquery
function showHourGlass()
{
$("#gifimage").show();
}
function hideHourGlass()
{
$("#gifimage").hide();
}

You ask for ideas, I have one sample -
http://www.myntra.com/shoes
load scroll down fastly this is the ajax jquery request which is exact output which you have mentioned in your question
Check source code
Jquery Ajax loading image while getting the data
This what the html looks like:
<button id="save">Load User</button>
<div id="loading"></div>
and the javascript:
$('#save').click(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 2000);
}
});
});
I hope this will help you.

Javascript - Load content, callback and loading

Here is my 'getContent' functions which takes a URL:
function getContent(url, callback) {
var request = new Sys.Net.WebRequest();
request.set_url(url);
request.set_httpVerb("GET");
var del = Function.createCallback(getContentResults, callback);
request.add_completed(del);
request.invoke();
}
What I'd like to do is display a loading image when this is called and then hide it when the callback is complete?
Can any suggest antying?

You can use the jQuery .load() function to load your HTML, then use the .ajaxStart() and .ajaxStop() event handlers to show and hide the loading animation.
Here is an example:
$(document).ready(function() {
$("#loadlink").click( function() {
$("#container").load( "load.htm" );
});
$("#loadlink").ajaxStart( function() {
console.log("start");
});
$("#loadlink").ajaxStop( function() {
console.log("stop");
});
});

$('#selector').html('<img src="loading.gif" />').ajax({
URL: 'myurl',
type: 'GET',
dataType:'html',
success:function (data){
console.log('This has changed');
// data is your html returned/response
},
error: function (){
//this handles errors such as 404,500, etc...
}
});
Whats happening?
$('#selector')//is where the result would be shown this instance <div id="selector">
.html('<img src="loading.gif" />')// adds an image to <div id="selector"><img src="loading" /></div>
.ajax();//well its the ajax call to get the page data
for more information
http://api.jquery.com/jQuery.ajax/