jQuery/Ajax conflicts

I am having a problem with two Magento extensions that I’ve installed on a client web site. They want to have these two extensions, but I can only get one of them to work, because of a conflict.

The file in question that is causing the conflict is ‘jquery.latest.js’. Upon opening this file, the comment at the top says jQuery version 1.4.2.

Now I have two extentions: an (1) ajax shopping cart and (2) a pop up login form (when a user clicks “login” it pops up a dialog instead of loading a login page).

If I comment out (and not include) the jquery.latest.js file, the ajax cart works, but the pop up login doesn’t. Conversely if I include the .js file, it’s the other way round.

How do I get around this conflict to allow both to work at the same time?

OK, I figured something out. There is another script which the ajax cart uses called ‘qTip2’. I disabled that and the pop up login works, but the cart doesn’t… So still kinda back to square one =/

We might be able to find a solution if there is a test page somewhere that demonstrates the problem.

Our development site is located here: http://sanitopia.com/dev/

It looks like you have both jQuery and Prototype libraries running at the same time. Both want to use the $ symbol, and fortunately you can tell jQuery not to globally use the $ symbol, so that it doesn’t conflict with other libraries.

This information on using jQuery’s noconflict might be useful for you here.

Does this mean I have to find ever .js file that this shopping cart plugin uses, and find and replace the ‘$’ with ‘jQuery’?

Not it does not. It means that you can apply the technique as shown in our tips and techniques post about using jquery noconfict which allows you to continue to use the $ symbol from within the jQuery wrapper.

jQuery(function ($) {
    // jQuery code in here

I have used the above method and wrapped the code from qtip2-min.js in the above code and it’s still not displaying the login. The cart is still functional though.

This is not a one shot cures all process. It’s a step by step matter where issues are observed and steps are taken to resolve those issues one at a time.

Welcome to the world of development and testing.

The qtip2-min.js file doesn’t need that technique applied to it. You should revert that back to how it was.