Why won't some jQuery code(s) work when isolated in unique <script> tags?

[drayarms]

This question is not code specific. It is a very general question, prompted by something I've been observing while building this website, and it really puzzles me. 

 

In the head section of the site I'm working on, I have all the jQuery codes that run the site, enclosed within  document ready methods, which are in turn enclosed within <script> tags in the head section of the site.  I usually put each code that performs a unique function, within unique script tags.  But I began to notice that some of my jQ codes wouldn't work at all when isolated in their own unique document ready method.  Then when I transposed this same code to a neighboring document ready method containing another unrealated code which already works, the said code works fine.

 

So the puzzle is, why wouldn't these codes work when isolated?  Are there certain circumstances when this might be the case? Perhaps there is something fundamental about jQuery/javascript that i don't understand that's going on here.  Has this been anyones's experience?  Answers appreciated.

[sandeep529]

 

But I began to notice that some of my jQ codes wouldn't work at all when isolated in their own unique document ready method.

 

Are you sure your code in executing in correct scope..Any variable that is initialized inside a function using the var keyword will have a local scope. If a variable is initialized inside a function without var, or it is declared outside if a function, it will have a global scope...so the issue might be your code may be using some variables declared inside a certain function so when they are moved to another scope, the code can no longer access those variables and stop wonrking

 

Please post some code samples so that you may get an accurate response.....

[drayarms]

@sandeep, thanks for the reply.

 

 

well here is one of the scripts that wont work on its own (when isolated). It loops through all the elementss within an checking if the href attribute matches the url. If it does, it adds a class to the

 

parent of that element. The purpose is to highlight the appropriate menu item of the page being displayed.

 

 

            <script type = "text/javascript">


                $(document).ready(function() {


                                   //Menu highlights.

                    var curURL =  document.location.toString();

                    $('.topnav1  li.highlight').removeClass('highlight'); 



                    $('.topnav1 li a').each(

                         function(){

                                if  (curURL.indexOf(this.href) != -1){

                                   $(this).closest('li').addClass('highlight');

                            } 

                             }  

                    );  





                });







            </script>

Well standing on its own, this script doesn't work, but once I include it within the document ready method of another unrelated script, it works. Here's what I mean.

 

 

            <script type = "text/javascript">
    //To load ajax pages. And menu highlights.



                $(document).ready(function() {


                                   //Menu highlights.

                    var curURL =  document.location.toString();

                    $('.topnav1  li.highlight').removeClass('highlight'); 



                    $('.topnav1 li a').each(

                         function(){

                                if  (curURL.indexOf(this.href) != -1){

                                 $(this).closest('li').addClass('highlight');

                                } 

                             }  

                    );  








                            //Load pages via Ajax

                    // Check for hash value in URL


                    var hash = window.location.hash.substr(1);


                    var href = $('.topnav li  a').each(function(){


                 var href = $(this).attr('href');


                         if(hash==href.substr(0,href.length-5)){


                        var toLoad = hash+'.html  .wrapper_inner';


                        $('.wrapper_inner').load(toLoad)


                        }


                    });





                $('.topnav li a').click(function(){





                    var toLoad = $(this).attr('href')+' .wrapper_inner';


                $('.wrapper_inner').slideUp('fast',loadContent);


                        $('#load').remove();


                        $('#tier3').append('<span id="load">LOADING...</span>');


                        $('#load').fadeIn('normal');


                        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);


                        function loadContent() {


                    $('.wrapper_inner').load(toLoad,'',showNewContent())


                        }


                        function showNewContent() {


                    $('.wrapper_inner').slideDown('slow',hideLoader());


                        }


                        function hideLoader() {


                    $('#load').fadeOut('normal');


                        }


                        return false;





                    });


            });//End of ducument ready method




            </script>

This I may add is just one example. I have two other scripts that didn't work on their own but worked once I boxed them in with the above script.

[sandeep529]

Hi,

 

I went through your code and found nothing wrong with it. I think this may have something to do with the order in with the document.ready methods are being executed. If I am right the ready methods execute in the order in which they are bound. 

 

You can try somthing like as follows

 

Remove lines from the second block so that it becomes identical to the first block.

If it still does not work change the order of the blocks so that the second block is executed before the first block.

If it is still not working, we may have to use debugging tools like firebug for firefox to check what exactly is happening.

 

Good luck

[drayarms]

@sandeep. i think you are right about the order of execution. i got the exact same suggestion from another forum.  what i don't understand now is what determines the order of execution?  and what exactly did u mean by remove lines from the second block so that it becomes like the first block?

[sandeep529]

and what exactly did u mean by remove lines from the second block so that it becomes like the first block?

 

Point is to change the second block gradually so that at some point,( if it is due some code present in the second block that makes it work), it will stop working. at that point you can be some what sure that the last line you removed was the one that makes the code in the first block work.

 

what i don't understand now is what determines the order of execution?

 

The ready methods are executed in the order they are bound. please see the threads

 

http://stackoverflow.com/questions/3934570/order-of-execution-of-jquery-document-ready

 

http://stackoverflow.com/questions/1307929/javascript-dom-load-events-execution-sequence-and-document-ready

 

 

[drayarms]

thanks sandeep. im going to look into that