6 Replies - 800 Views - Last Post: 26 December 2011 - 09:51 PM

#1 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

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

Posted 24 December 2011 - 09:16 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Why won't jQuery code(s) work when isolated in unique <script

#2 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 25 December 2011 - 12:54 AM

Difficult to explain without an example. Please do provide one...
Was This Post Helpful? 0
  • +
  • -

#3 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 26 December 2011 - 04:31 PM

@cupid vogel, well here is one of the scripts that wont work on its own (when isolated). It loops through all the <a> elementss within an <ul> checking if the href attribute matches the url. If it does, it adds a class to the <li> parent of that <a> 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.
Was This Post Helpful? 0
  • +
  • -

#4 anonymouscodder  Icon User is offline

  • member icon

Reputation: 126
  • View blog
  • Posts: 710
  • Joined: 01-January 10

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 26 December 2011 - 07:07 PM

The multiple functions passed to JQuery document ready are called in the passed order (http://jsfiddle.net/wx5ga/).

I didn't analyzed your code, but could be something that you are doing with other function passed to the document ready are changing something and making the other one don't work.

What I mean is that maybe the order is important for whatever you doing. If it's hard to analyze you can check if this is the issue by testing both and making sure that the order of the executed code are the same on both cases.

ps: instead of $(document).ready() you can use the shorter version $().

This post has been edited by anonymouscodder: 26 December 2011 - 07:10 PM

Was This Post Helpful? 1
  • +
  • -

#5 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 26 December 2011 - 07:27 PM

@ anonnymouscodder, i'm not sure if I quite understood your suggestion, but are you perhaps saying that the order in which scripts are executed matters? And screwing up that order somehow may be why some of my scripts don't work?
Was This Post Helpful? 0
  • +
  • -

#6 anonymouscodder  Icon User is offline

  • member icon

Reputation: 126
  • View blog
  • Posts: 710
  • Joined: 01-January 10

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 26 December 2011 - 07:39 PM

View Postdrayarms, on 26 December 2011 - 11:27 PM, said:

@ anonnymouscodder, i'm not sure if I quite understood your suggestion, but are you perhaps saying that the order in which scripts are executed matters? And screwing up that order somehow may be why some of my scripts don't work?


Yes, but I'm just suggesting.

http://jsfiddle.net/s5z35/
http://jsfiddle.net/n8JG6/
The examples are pretty stupid but it's just to illustrate.

This post has been edited by anonymouscodder: 26 December 2011 - 07:40 PM

Was This Post Helpful? 0
  • +
  • -

#7 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Why won't jQuery code(s) work when isolated in unique <script

Posted 26 December 2011 - 09:51 PM

Yes, the order does matter. When multiple document.ready's are invoked, they are pushed to a queue, and are executed as first-come-first-serve basis. So if you are using a variable or a DOM element in one document.ready you have defined or brought into play in a subsequent document.ready, it won't work as expected. If you are referencing a variable defined later, an error would be raised, but if you are invoking some action on a DOM element brought into play later, there won't be an error, and the code would shut off silently. That might be the case here...
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1