0

I code with jquery. My problem is with:

<script type="text/javascript"> $(document).ready(function() { function1(); function2(); }); </script>

Sometimes no function works and sometimes the functions work but they are not working in order!! function1:

function getnameCategories1() { var request = new XMLHttpRequest(); if(i<idCategories.length) { request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories/"+idCategories[i]+"?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true); request.onreadystatechange = function() { if(request.readyState==4) { //alert("Status2 is "+request.status); if (request.status == 200 || request.status == 0) { response1 = request.responseXML.documentElement; nameCategories[i] = response1.getElementsByTagName('language')[0].firstChild.data; //alert(nameCategories[i]); $('#im'+i).html(nameCategories[i]); $('#a'+i).show(); i++; } } } request.send(); } else { return; } }

function2:

function getCategories() { var request = new XMLHttpRequest(); request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true); request.onreadystatechange = function() { if(request.readyState==4) { //alert("Status is: "+request.status); if (request.status == 200 || request.status == 0) { response = request.responseXML.documentElement; i=0; while(response.getElementsByTagName('category')[i]!=undefined) { idCategories[i]=response.getElementsByTagName('category')[i].getAttribute('id') ; //alert(idCategories[i]); i=i+1; } } } } request.send(); }

Sometimes even just an alert in $(document).ready does not work

Improve this question
5
  • odd...can you post an example of code where this is happening? Commented Mar 13, 2012 at 10:12
  • The code is ok, so the problem should be inside you function1 and function2. On a side note you should accept some of the answers to your questions, people here like that. Commented Mar 13, 2012 at 10:12
  • What is actually happening in function1 and function2? If function1 and function2 are executing async requests, (e.g. XHR requests), then the results won't come back in the same order. Commented Mar 13, 2012 at 10:13
  • the two functions are in a separate js, I called first the js, and then the $(document).ready, but it does not work. the two functions are correct, because when I call them from a button, they work well Commented Mar 13, 2012 at 10:18
  • yes @Geuis the two functions are executing XHR, so what to do? I change just the async request to a sync one? Commented Mar 13, 2012 at 10:21

5 Answers 5

Reset to default
3

Unless you use ajax or setTimeout in your function, they should play in the order you did put them.

The $(document).ready will only wait for the DOM to be Ready before calling your functions.

Provides an example of non working code if you want more information.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

the two functions are in a separate js, I call first the js, and then the $(document).ready, but it does not work. the two functions are correct, because when I call them from a button, they work well
1

jQuery is kind of awesome because every async request gets returned as a Deferred object. Once you get the hang of them (they're simple), you'll never write async requests the same way again.

http://api.jquery.com/category/deferred-object/

In a nutshell, if you say:

var x = $.get('/some_url', function(){ //your callback });

x now is a Deferred object. When your request finishes, either a .done() or .fail() in most cases.

You can also do:

var x = $.get('/some_url'); x.done(function(){ //your callback });

There's a really nice utility called .when(). Read up on that, its what you need.

Improve this answer

Comments

0

As Michael Laffargue said, unless you're using some kind of AJAX request, or doing something inside a setTimeout, your funcionts should be called in the right order.

Please keep in mind that jQuery has a bug with DOM state and iframes (check for reference: http://bugs.jquery.com/ticket/10067 ).

You're best bet is lo bind the .ready() callback function to the DOM instead of doing it inside an iframe.

Also, keep in mind that you can bind more than one .ready() callback. Example:

$(document).ready( function(){ console.log("Hello"); } ) $(document).ready( function(){ console.log("world"); } )

Maybe you binded your functions in the wrong order?

Regards

Improve this answer

Comments

0

This might not be the problem in your case, but may be worth a try.

I know that when working with asp.net updatePanels, you need to use function pageLoad() { // } instead of $(document).ready( function() { // });

It has it's limitations though as you can only include a single function pageLoad() on a page.

so in your case:

function pageLoad() { function1(); function2(); };
Improve this answer

Comments

0

You should wait for the request status (request.readyState == 4) , and then call function2().

if(request.readyState==4) { //alert("Status2 is "+request.status); if (request.status == 200 || request.status == 0) { response1 = request.responseXML.documentElement; nameCategories[i] = response1.getElementsByTagName('language')[0].firstChild.data; //alert(nameCategories[i]); $('#im'+i).html(nameCategories[i]); $('#a'+i).show(); i++; } function2(); }
Improve this answer

1 Comment

I like Geuis his answer better though.