Jquery caused other script to not work?

Hey there digitalpoints member, I'm new here and had problem with javascripts, so I'll be glad if you could help me on it.

Here's the problem:

Was using the slider on http://script.aculo.us/ and a ajax load into DIVs script awhile back, works great. But ever since I downloaded a shoutbox made from jquery into my site, the slider and ajax load into DIVS script stopped working. Tried and remove the jquery.js then the both script works.

Here's the link to the jquery: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
Here's the link to the script I'm using (Slider): http://wiki.github.com/madrobby/scriptaculous/effect-toggle (I'm using the Toggle via 'slide' script)

As for the Load into DIVS script, it's just the normal basic one:

			function loadHome()
			{	
				$('navigation').innerHTML = '<center><img src="images/loading.gif" /></center>';
				new Ajax.Request('nav/home.php',
				{
					onSuccess: function(transport)
					{
						$('navigation').innerHTML = transport.responseText;
					}
				});
			}

HTML:

Anyone out there know what's happening? Is there anyway to solve this?

 

I am afraid you are not going to like my answer, but it's a really difficult problem to solve. There might have been a kind of a "namespace colission", which means that some variables with the same name are used by both your scripts, or there might exist some functions with the same name that get redefined (actually, they cause an error and don't get redefined in JavaScript).

I strongly suggest you check your code with some JavaScript Debugger, but I am afraid it will be really difficult to fix it.

 

Okay 1 thing, why would:

function loadHome()

HTML:

needed in jquery? Anyway, thanks for that explaination.

 

The function loadHome() might not be initialized in jQuery and probably really isn't. But there are many many more variables and functions initalized in both your Scripaculous Slider and your jQuery Shoutbox. However, you can't even be 100% that this "namespace colission" is the root of the problem, there are many possibilities - the error could be something really trivial, but you need to find it first.

I wish I could help you more, because honestly I know how much this sucks ... but I can't.

 

iirc, you can run jquery in a namespaced environment where you need to call jquery.functionname, avoid such issues... but this can be a pain with some plugins that are unaware of it.

you can also use an anonymous function for closure on the 2 sets of js (thus keeping variables and functions in a local scope that does not interfere with each other)

you can update your ajax calls to use jquery instead...

but the most sense in this case is to NOT run the two frameworks prototype and jquery at the same time. i am sure whatever your wants are, there are going to be plugins for what you need in both of them, making things easier to manage. chances are, jquery with its extended plugins repository will be able to provide you the slider functionality from scriptaculous.

oh, and a sliding layer is so basic and rudimentary in any framework it's almost what you'd do after "hello world", so code one from scratch.

too many ways to fix it but they require some decisiveness on your part

 

That'll fix my problem and save much time, been looking for it but to no avail, do tell me how?