Develop Reference

Removing an Ajax loader image after sometime

I have an ajax loader that appears after a button is clicked with the following code:
jQuery(document).ready(function($){
{
$.getElementById('form').onsubmit = function () {
$.getElementById('submit').style.display = 'block';
$.getElementById('loading2').style.display = 'block';
};
}(document));
});
HTML:
<input type="submit" class="button alt" onclick="$(\'#loading\').show();" name="woocommerce_checkout_place_order"/>'
I would like the ajax loader to disappear after like 10seconds.
Please let me know

You can use this to hide your loader after 10 seconds.
setTimeout(function() {
$('#loading').hide(); // I wasnt sure which one you wanted to hide
$('#loading2').hide();
}, 10000);
Also looking at your code im not sure if that would have worked anyway. Also if you are using jQuery then you don't really need to use vanilla Javascript so your code could be changed to this.
jQuery(document).ready(function($){
$('#form').submit(function () {
$('#submit').css('display', 'block');
$('#loading2').css('display', 'block');
});
});

$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 10 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#loading").hide('blind', {}, 500)
}, 10000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }

JQuery show() - halt function until callback is executed [duplicate]

This question already has answers here:
How to attach callback to jquery effect on dialog show?
(5 answers)
Closed 8 years ago.
I want my javascript/jquery application to stop executing all animations, and only continue executing when a loading .gif is shown.
I did manage to show the loading .gif while other animations where going on, but I really need it to already show before anything else is animated.
So I fabricated a method that waits for the callback to be executed, but it doesn't work as expected.
var Shown = false;
function ShowLoadingGif() {
$("#loading").show("fast", function() {
Shown = true;
});
while(!Shown) {
//wait for callback to be executed
}
Shown = false;
}
See this JFiddle example. I would not only like to know how to properly go about solving this problem; I would also appreciate any input as to why it doesn't work as I expect it to.
Thanks in advance!

You can use something like this, using the jQuery Deferred Object ( see Docs )
var Shown = false;
function ShowLoadingGif() {
var $promise = $.Deferred();
$("#loading").show("fast", function() {
$promise.resolve("Im done");
});
$promise.done(function(data) {
// data === "Im done"
});
}
I have updated your Fiddle that now alerts when the stuff has finished as you would expect
Fiddle (http://jsfiddle.net/k5Wan/3/)
Also I have updated the code quality
var $promise = $.Deferred();
$promise.done(function() {
alert("Done...");
});
$(function() {
$("button").on("click", function() {
$("#loading").show("slow", function() {
$promise.resolve();
});
});
});

You can shorten all that:
$('#loading').show('fast', function(){
console.log('Im loaded');
}).promise().done(function(){
console.log('great loading with you!');
});
DEMO

Loading GIF while AJAX completes

This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....

You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});

I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.

How to fade out elements on delete in MeteorJS

Take a look at: http://shopping-list.meteor.com. I want to fade out the items when they're deleted instead of having them instantly disappear, and I'm not sure how I'd implement this.
The code is at http://github.com/chintanparikh/shopping-list.
If anyone can set me on the right path, that'd be awesome.
Cheers!

Have you tried using the callback:
Template.item.events({
'click .close': function()
{
var self = this;
$(self).fadeOut('slow', function() { Items.remove(self); });
}
})
Update: added "self" as suggested by Rahul.

Try this:
Template.item.events({
'click .close': function()
{
//get parent (li) and fade it out.
$(this).parent().fadeOut();
Items.remove(this);
}
})

slideUp is not working

following is my code. slideDown is working fine , but slideUp is not working. what is the mistake in my code.
var a=0;
$(document).ready(function() {
$("#login").click(function(){
if (a==0){
$("#banner").slideDown("slow");
a=1;
} else {
$("#banner").slideUp("slow");
a=0;
}
});
});

Why don't you use the slideToggle() function within jquery?
Description: Display or hide the matched elements with a sliding
motion.

I just tried your code in jsfiddle.net and it works perfect (slideUP and slideDown)
Test it

You can just use the slideToggle function to achieve your result:
$(function() {
$("#login").click(function() {
$("#banner").slideToggle("slow");
});
});
However, your code looks like it should work, unless a is modified elsewhere (which is entirely possible since it's a global variable), if you wish to continue to use slideUp and slideDown try correcting the scope of a (and possibly giving it a more meaningful name) like so:
$(document).ready(function() {
var isUp = true
$("#login").click(function(){
if (isUp){
$("#banner").slideDown("slow");
isUp = false
} else {
$("#banner").slideUp("slow");
isUp = true;
}
});
});