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 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.

[smokeys_13]

Not sure I fully understand the issue, but it might interest you to learn about ‘scopes’. If you wrap a block of code in a document ready function, variables and functions set in this will not be accessible outside of that function. If you have multiple that communicate with each other, but they are in their own document ready function, they won’t be able to see each other. That may not be explained particularly well, but if you look up variable scopes or similar in relation to javascript you should be able to find a properly explained version!

[drayarms]

@smokey, thanks for the reply. perhaps an example would best illustrate if the problem is related to variable scopes or not.

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.
[php]

            $(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>[/php]

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.

     [php]   <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>[/php]

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.