Comments on: Multiple $(document).ready()

By: Colin Asquith

Colin Asquith — Tue, 06 Dec 2011 16:39:17 +0000

js – if you want to create a function that can be used anywhere then create it outside of the document.ready but then call it from inside the document.ready method.

By: Kavya Shetty

Kavya Shetty — Thu, 28 Apr 2011 07:04:45 +0000

var $j = {};
$j = jQuery.noConflict(true);

$j(document).ready(function () {
$j(“.newsticker”).CarouselLite({
});

});
$j(document).ready(function () {
$(‘.slideshow’).cycle({
fx: ‘fade’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
});
});

By: Hugo Ribeiro

Hugo Ribeiro — Wed, 08 Dec 2010 02:25:56 +0000

Ok, so here's my question... I am also trying to run a function within another, but I am having some(allot) of troubles... I've tryed this way:

 
$(document).ready(function(){
		
	$('#navmenu li a')
		.css( {backgroundPosition: "-235px 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0px 0)", color:"#eee5e0"}, {duration:500})
		});
	$('#navmenu li a').mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(235px 0)", color:"#963231"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "-235px 0"})
			}})
		});
	$('#navmenu li a').click( function(){
									   
			var href= $(this).attr('href');
			var toLoad= href+' #texto';
			var titulo = "\"O Artur\"";
			if(href=="index.php")
				titulo = "\"O Artur\""
			else 
				titulo = $(this).text()
			
			$('#texto').hide('normal',loadContent)
			$('#load').remove()
			$('#conteudo').append('LOADING...')
			$('#load').fadeIn('normal')
			$("p#titulo").fadeOut('fast')
			window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4)
			
			function loadContent() {		
				$("#texto").load(toLoad,'',showNewContent())
				$("p#titulo").html(titulo)
				$("p#titulo").fadeIn("normal")
			}
			function showNewContent() {
				$('#texto').show('normal',hideLoader())
			}
			function hideLoader() {
				$('#load').fadeOut('normal')
			}
			return false;
		});		
			
});


$(document).ready(function(){
	$("#datepicker").datepicker({ minDate: 0, maxDate: "+1Y" })
		
});

, and also with the following code inside the other... like this :


$(document).ready(function(){

(...) 

        $(document).ready(function(){
			$("#datepicker").datepicker({ minDate: 0, maxDate: "+1Y" })
		
       });

});

can anyone tell me what i am doing wrong? Thank you

By: jere

jere — Fri, 19 Nov 2010 09:11:48 +0000

Try like this:


var someFunction;
$(document).ready(function() {
     someFunction = function() {
          // some function that does stuff
     };
});

$(document).ready(function() {
     someFunction();
});

By: Alex C

Alex C — Fri, 27 Aug 2010 19:50:13 +0000

Very nice! Exactly what I was looking for. I need this for a Joomla module which needs to generate some $(document).ready() code but not disturb the static call to the same function elsewhere. Thank you for this great article :)

By: Mike

Mike — Sat, 21 Aug 2010 07:14:50 +0000

I dont get it… can you explain how to get rid of this error in detail? thanks! :)

By: Peter

Peter — Thu, 08 Apr 2010 01:24:06 +0000

Just a guess, but you likely want to use unbind to remove the existing event handlers from the elements before you re-run Script A. Sounds like your elements have multiple handlers for a given event.

By: tom

tom — Sun, 21 Mar 2010 20:26:25 +0000

hello, great article.
wanted to ask a solution for the following scenario:
i have a web page containing a div where i can drag and drop elements. On first time load, everything in .ready() in a script(lets call it script A) works great. Now i have another basic option besides the drag and drop to interact with the elements, and a refresh button to refresh the div asynchronously.
The refresh button fetches all rows from database and places it in the div as draggables, but for them to become draggables, i need to echo script A again just after fetching them.
Now i noticed that after each refresh, some items are firing more than 1 ajax request, as opposed to the first time page load without refreshing. Of course, if i dont “re echo” the script, i dont get draggables.
Any suggestion welcome. Thanks.

By: Dejan

Dejan — Tue, 02 Mar 2010 03:50:33 +0000

Hi Karl Swedberg.
I’m noobie in JS and i have already integrated “easySlider” on my site for my photo gallery.
I found out about “lavalamp” plug in and when i wanted to put it on same page as “easySlider” it’s not working. So on other pages where i don’t have “easySlider” everything is ok.
I have no idea what to do.

< pre > < code >
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});

$(document).ready(function(){
$(“#slider”).easySlider({
auto: false,
continuous: true,
numeric: true
});
});
< /code > < /pre >

I spended a whole night trying to fix this, but i had no luck (and knowledge as well).

Any suggestion what to do?

Thanks a lot in advance.

By: Bryan

Bryan — Tue, 02 Feb 2010 00:43:40 +0000

Hello,
I am a beginner in jQuery and I have been playing around with couple basic jQuery methods.
A question came up when I try to build my test site, the scenario is as follows:
If I have a site that includes only one javacript file, say site.js, and inside the file I have a couple of document.ready function that manipulates different DOM objects e.g.

$(function(){
//a function for sign_up page
//change the border color when password field is unfocused
$(“#password”).blur(function(){
$(“#password”).css({“border” : “red solid 3px”});
});

//other functions
});

My question would be what if I am not in the page where the password field is present. Will this cause any problem or is this a good style? if not what would be a better approach?