how to execute jquery code one by one?
I want first do "function 1", when finish the job. then do "function 2"...
Thanks.
<script type="text/javascript">
jQuery(document).ready(function(){
$(document).ready(function(){
//function 2, jqeury.ajax
});
$(document).ready(function(){
//function 3, jqeury.json
});
$('#col').load("home.html");
//function 4, jqeury.load
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
//function 1, a jquery slider plungin
});
</script>
You don't need so many document ready calls. One will suffice
If you mean you want to call each method after one has received the response from the AJAX calls you are making, put the code in the callback;
$(document).ready(function(){
one(); //call the initial method
});
function one(){
$.get('url', {}, function(data){
two(); //call two() on callback
})
}
function two(){
$.getJSON('url', {}, function(data){
three(); //ditto
})
}
function three(){
$('#selector').load('url');
}
The docs
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.getJSON/
http://api.jquery.com/load/
Instead of using more than one document.ready() use callback functions as below.
<script type="text/javascript">
function ajaxfun() {
//function 2, jqeury.ajax
//in ajax callback call the jsonfun();
}
function jsonfun(){
//function 3, jqeury.json
//after json function add the next function in it callback.
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
//function 1, a jquery slider plungin
//Call ajaxfun() here to execute second.
});
</script>
It looks like you are doing three ajax calls. Since jQuery 1.5, we now have a Deferred object (technically a jqXHR object) returned from ajax calls, so you can chain them like this:
$(function() { // this is a document ready function. it's all you need.
$.ajax(/* your ajax specs */).done(function() {
$.getJSON('somepath').done(function() {
$('#container').load('etc.');
});
});
});
use setTimeout function
function f1(para) {
// ...
// do work;
setTimeout(f2, 10);
}
function f2() {
// ...
// do work
setTimeout(f3, 10);
}
<script type="text/javascript">
jQuery(document).ready(function(){
function2(){ //declare what function 2 will do here
//function 2, jqeury.ajax
}
function3(){
//function 3, jqeury.json
}
$('#col').load("home.html");
//function 4, jqeury.load
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
//function 1, a jquery slider plungin
function2(); // execute function 2 after 1
function3();
});
</script>
Related
I want to call a callback function after a called a function that dynamically calls a function. I am either wording it wrong or it is complicated. I am not sure. But here is the relevant code.
confirm_delete(delete_resource,$resource_id, function(){
if ($confirm_delete === 1) {
$(this).parent().parent().hide();
$(this).parent().parent().prev().hide();
}
});
The following is what it looked like without the attempted callback
confirm_delete(delete_resource,$resource_id);
I'm assuming that you are looking for something like this:
function confirm_delete(delete_resource, $resource_id, cb) {
var $confirm_delete = confirm('Are you sure');
if ($confirm_delete) {
$(this).parent().parent().hide();
$(this).parent().parent().prev().hide();
// call callback fn
cb();
}
}
confirm_delete(1, 1, function(){
console.log('im callback fn');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have this code
<script type="text/javascript">
var currentBlock;
function onSuccessEditUser(result) {
showMessage(result.Message);
window.location = '#Url.Action("UserIndex")';
}
</script>
and I would like to add a little delay after showMessage and before window.location.
How can I do that?
You can use setTimeout to fire off the code after a specified interval:
function onSuccessEditUser(result) {
showMessage(result.Message);
// Wait 1 second
setTimeout(function() {
window.location = '#Url.Action("UserIndex")';
},1000);
}
use java script setTimeOut method to execute something after specified time
<script type="text/javascript">
var currentBlock;
function onSuccessEditUser(result) {
showMessage(result.Message);
// Wait 5 second
setTimeout(function() {
window.location = '#Url.Action("UserIndex")';
},5000);
}
<script>
You could use a setTimeout(function(){showMessage(result.Message);}); function.
Or opt for jQuery $(..).delay(300); http://api.jquery.com/delay/
Whichever you prefer.
i use lab.js 2.0.3 for parallel loading my scripts.
the problem is, that in 1 of 10 times the "$(window).load" part fired much too early. the part with "$(document).ready" works fine.
example:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js" type="text/javascript"></script>
<script>
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){
$(window).load(function() {
// Function 1
$("jQuery Function 1");
// Function 2
$("jQuery Function 2");
});
$(document).ready(function() {
// Function 3
$("jQuery Function 3");
// Function 4
$("jQuery Function 4");
});
});
</script>
i guess, that i do something wrong, but don't know what : (
This may be because $(window).load() only ever fires once per page. If you missed it waiting on the scripts to load, you missed it. So, between .wait and .load, you have a race condition that's not really predictable whether you'll win or lose.
$(document).ready(), on the other hand, is similar to Deferred Objects in that new callbacks can be added after the event has fired and will still be called.
You can see this demonstrated here: http://jsfiddle.net/coiscir/AFszS/1/
$(window).load(function () {
console.log('outer window.load');
// bind after the event
setTimeout(function () {
$(window).load(function () {
console.log('inner window.load'); // you'll never see this
});
}, 10);
});
If you want a similar effect as .ready for .load, you can use a Deferred Object to mediate between the actual event and your callbacks: http://jsfiddle.net/coiscir/m4D46/
var windowLoad = $.Deferred();
$(window).load(windowLoad.resolve);
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){
windowLoad.done(function() {
// Function 1
$("jQuery Function 1");
// Function 2
$("jQuery Function 2");
});
$(document).ready(function() {
// Function 3
$("jQuery Function 3");
// Function 4
$("jQuery Function 4");
});
});
<script type="text/javascript" src="jscripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("funciton");
$(function(){
$.fn.gotof(){
alert("I am calling form jquery");
}
});
});
</script>
<input type="button" onclick="dofunc();">
<script type="text/javascript">
function dofunc(){
gotof();
}
</script>
how do i call gotof() that is present in jquery
and below is the code written over jsfiddle
There are a few errors in your code. Fixed it should look like this:
$.fn.gotof = function() { // has to be defined as a function, does not need to be inside a nested document ready function
alert("I am calling form jquery");
};
$(document).ready(function() {
alert("function is ready to use now");
});
function dofunc() {
$.fn.gotof(); // can call it using $.fn.gotof(), but it should really be called properly via a selector $('div').gotof();
}
http://jsfiddle.net/pSJL4/8/
Check out http://docs.jquery.com/Plugins/Authoring - this should answer your questior. You also are not defining your function correctly; instead of
$.fn.gotof(){
alert("I am calling form jquery");
}
you need
$.fn.gotof = function(){
alert("I am calling from jquery");
};
How do you call function lol() from outside the $(document).ready() for example:
$(document).ready(function(){
function lol(){
alert('lol');
}
});
Tried:
$(document).ready(function(){
lol();
});
And simply:
lol();
It must be called within an outside javascript like:
function dostuff(url){
lol(); // call the function lol() thats inside the $(document).ready()
}
Define the function on the window object to make it global from within another function scope:
$(document).ready(function(){
window.lol = function(){
alert('lol');
}
});
Outside of the block that function is defined in, it is out of scope and you won't be able to call it.
There is however no need to define the function there. Why not simply:
function lol() {
alert("lol");
}
$(function() {
lol(); //works
});
function dostuff(url) {
lol(); // also works
}
You could define the function globally like this:
$(function() {
lol = function() {
alert("lol");
};
});
$(function() {
lol();
});
That works but not recommended. If you're going to define something in the global namespace you should use the first method.
You don't need and of that - If a function is defined outside of Document.Ready - but you want to call in it Document.Ready - this is how you do it - these answer led me in the wrong direction, don't type function again, just the name of the function.
$(document).ready(function () {
fnGetContent();
});
Where fnGetContent is here:
function fnGetContent(keyword) {
var NewKeyword = keyword.tag;
var type = keyword.type;
$.ajax({ .......
Short version: you can't, it's out of scope. Define your method like this so it's available:
function lol(){
alert('lol');
}
$(function(){
lol();
});
What about the case where Prototype is installed with jQuery and we have noconflicts set for jQuery?
jQuery(document).ready(function($){
window.lol = function(){
$.('#funnyThat').html("LOL");
}
});
Now we can call lol from anywhere but did we introduce a conflict with Prototype?