CODEWITHSUNDEEP
jquery
user1223160
user1223160

Reputation:

$(document).ready with jQuery

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

Upvotes: 0

Views: 840

Answers (5)

feskr
feskr

Reputation: 819

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

Upvotes: 0

Geuis
Geuis

Reputation: 42267

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.

Upvotes: 1

Tom
Tom

Reputation: 12988

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

Upvotes: 0

alexandernst
alexandernst

Reputation: 15099

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

Upvotes: 0

Michael Laffargue
Michael Laffargue

Reputation: 10294

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.

Upvotes: 3

Related Questions