We Keep Coding

Modal only triggered after ajax request

I have two questions about this code. The first is why the modal is not shown before the alert? The second is how can i delay the modal, because the popup is so fast that i can't see nothing in the modal.
$('#myModal').modal('hide');
$(document).ajaxStart(function() {
$('#myModal').modal('show');
}).ajaxStop(function() {
$('#myModal').modal('hide');
//$('#myModal').delay(5000).modal('hide'); does not work
});
$(".generate_report").click(function(event) {
event.preventDefault();
$.post("xls.php", $(".form_report").serialize(), function() {
}).done(function(data) {
alert("should be executed only after modal");
});
});
demo

You can achieve the same with this code:
$(".generate_report").click(function (event) {
event.preventDefault();
$('#myModal').modal('show');
setTimeout(function(){
$.post("xls.php", $(".form_report").serialize(),function(data){
$('#myModal').modal('hide');
alert("after modal");
})
}, 2000);
});
And remove this code
$(document).ajaxStart(function() {
$('#myModal').modal('show');
}).ajaxStop(function() {
$('#myModal').modal('hide');
//$('#myModal').delay(5000).modal('hide'); does not work
});

What this code does is show a modal when the ajax call starts and instantly hide it when its done. You can use a timer to wait a while before closing it.
Also you've nested a callback function in your jQuery.post, but you don't use it which causes confusing code here. Theres no need to use .done() when you're just going to append it to the AJAX function directly. You can just use the callback function here.
$.post("xls.php", $(".form_report").serialize(), function(data) {
alert("should be executed only after modal");
});
But that is just a code styling concern. The done(), success(), fail() methods are used on a jQuery.Deferred promise object, which $.ajax happens to return. And since $.post/$.get are just pointers to $.ajax, they will too.
Secondly, if you want the modal to wait before it closes, you can do this:
var waitTimer;
var timeToWait = 2000; // Time to wait here
var $myModal = $('#myModal');
$myModal.modal('hide');
$(document).ajaxStart(function() {
$myModal.modal('show');
}).ajaxStop(function() {
if (waitTimer) {
clearTimeout(waitTimer);
}
waitTimer = setTimeout(function() {
$myModal.modal('hide');
}, msToWait);
});
The .delay() method you tried to use only works after you've animated something.
Also a quick tip: Cache your jQuery selectors. You're telling jQuery to jump in the DOM 3 times to search for the same element.

call command after animate command is done

I want to know how can i call up the 2nd line after the animate function is done? Now the 2nd line starts before the animate function is done.
Can someone help me?
$(".intro").animate({height:'100%', width:'100%'}, 6000);
$(".intro").append("<div class='text'>Some Text</div>")
$(".text").css({"background":"#FFFF00" , "height":"23px","width":"300px","position":"absolute","top":"0","left":"0","bottom":"0","left":"0","margin":"auto"});

Use this code snippet - add a callback.
Complete Function : If supplied, the complete callback function is fired once the animation is complete.
$(".intro").animate({height:'100%', width:'100%'}, 6000, function(){
$(this).append("<div class='text'>Some Text</div>");
});
Refer this Link: .animate() for More examples.

Use callback function for animate:
$(".intro")
.animate(
{height:'100%',width:'100%'},
6000,
function(){
$(".intro").append("<div class='text'>Some Text</div>");
}
);

Callback Function Not Working With .Queue()

I'm trying to run a loop on some images where I change an img's src several times. I want it to loop back through again once it completes so it's a continuous scroll of images. I've set up my function like this:
function img_loop(){
console.log('test');
console.log(this_value.attr('src'));
this_value
.queue(function(next) {
this_value.attr('src',new_img_src); next();
})
.delay(2000)
.queue(function(next) {
this_value.attr('src',new_img_src_2); next();
})
.delay(2000)
.queue(function(next) {
this_value.attr('src',img_src); next();
})
.delay(2000)
.queue(function() {
img_loop();
});
}
img_loop();
It runs successfully once time through. The curious things is that it logs to the console, runs once through and then logs to the console again meaning it's called the function again but I suppose it stops right at the first queue function. I ran a console in that first queue function and can confirm that it doesn't run the second time through.
I'm assuming there is a limitation on using queue() in a callback function? Any ideas on why it wouldn't run again?
EDIT
In reference to the answer below, I tried this with the function having a parameter and then have it loop putting that parameter back in, but unfortunately this did not work:
function img_loop(the_image){
var that = the_image;
console.log(the_image);
the_image
.queue(function(next) {
the_image.attr('src',new_img_src); next();
})
.delay(2000)
.queue(function(next) {
the_image.attr('src',img_src); next();
})
.delay(2000)
.queue(function() {
img_loop(that);
});
}
img_loop(me);
When I log it out in the console, it displays the same content so it retains the value after the loop is run through once. I'm not sure why it doesn't trigger again?
Just showing my progress in case anyone else has ideas?

If when you write this_value you're talking about the this keyword (the context of the function), maybe the value of this is lost in the second call to img_loop.
EDIT
I've been thinking about your code again, in the last .queue call you don't execute the queue, either by calling next() or by calling .dequeue()
I've changed made modifications to the following code, try this one.
function img_loop(the_image){
console.log(the_image);
the_image
.queue(function(next) {
the_image.attr('src',new_img_src); next();
})
.delay(2000)
.queue(function(next) {
the_image.attr('src',new_img_src_2); next();
})
.delay(2000)
.queue(function(next) {
the_image.attr('src',img_src); next();
})
.delay(2000)
.queue(function() {
img_loop.(the_image);
$(this).dequeue();
});
}
img_loop(me);

Wait for animation function in javascript

I have the following methods in javascript:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
};
And in another JS Class:
Test.prototype.handleHide = function () {
alert("SceneDialog.handleHide()");
$(".screenOverlay").fadeOut("slow");
$(".dialogBox").fadeOut("slow");
};
sf.scene.hide() calls the handleHide method. In handleHide there's some animation, but it's not shown. The Controller doesn't wait for it to be finished.
I tried $.when(sf.scene.hide()).done() without any luck.
Any suggestions?

You can use the jQuery queue to keep a list of animations that are queued to occur only after the previous one has completed.
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
would become:
sf.scene.hide(curScene);
sf.scene.queue(function() {
$(this).show(newScene, curScene);
$(this).dequeue();
});
sf.scene.queue(function() {
sf.scene.focus(newScene);
$(this).dequeue();
});

You can use the promise() function of jquery to call a callback when ALL animations are over.
Try out:
Test.prototype.handleHide = function (callback) {
$(".screenOverlay,.dialogBox").each(
function(i) {
$( this ).fadeOut("slow");
}
);
$(".screenOverlay,.dialogBox").promise().done(callback);
};
And pass the callback as an argument to handleHide. Your changeScene function should look like this:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene, function() {
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
});
};

if you are using jquery animation functions, jquery generally provides a complete parameter which will be called when the function is complete.
using fadeout:
$('#test').fadeOut('slow', function() {
// fadeout is finished!! do something
});

jQuery Delaying Queue

I want to delay things like the css from happening but this method wont work. Any ideas on how I can delay tasks.
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"}, "fast").delay(800).css("background-color","yellow");
});
});

You can use .queue() to stick it on the default animation (fx) queue, like this:
$('.btn').click(function() {
$('.divOne').animate({"left":"+=400px"}, "fast").delay(800).queue(function(n) {
$(this).css("background-color","yellow");
n(); //call next function in the queue, needed if you animate later!
});
});
You can test it here, all this does is stick it in the fx queue using .queue(function(n)), the n is the next function in the queue, so we're calling it, for example if you didn't do this and added any animation after it, it just wouldn't run, because the next function or .dequeue() isn't called.

Maybe use a callback function on the animate. Once the animation is complete use a setTimeout()
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"},"fast", function() {
var $elem = $(this);
setTimeout(function() {
$elem.css('background-color','yellow');
}, 800);
})
});
This might not be syntactically perfect.