JS conflicts

Nothing in your Cart? Forever spinning loading wheel? Light-box acting strange? All these problems and a lot more occur because your site is loading jQuery more than once.

Hello I’m Cameron and I have been helping people in support for about a month now; this issue is probably one of the most common problems that I get. So I thought I would write a decent explanation here of what is going wrong and how to fix it. So, if the front end of your site is acting strange (even if it is not, read this…) it could be because your site is including jQuery multiple times.

So how do I check?

 

  • Open up the page that is giving you grief and view its source in your browser.
  • Open up your browser’s find/search window (Ctrl+F)
  • type in jQuery’ and view what highlighted text. You should see this as a group, since WP e-Commerce loads all javascript libraries.
  • Now pay attention to the first line that loads the jQuery itself – the rest are jQuery plugins that require jQuery to be loaded first.
  • Now keep looking though the source, if you see another line where jQuery is being loaded, (it doesn’t matter about the version info) this will be your problem.

Why is this a problem?

As you probably know, the order in which scripts are loaded matters. As far as the computer is concerned, they are not separate, the browser will just read them as one long script, not as many small ones, so if another jQuery script is loaded it can really mess up the jQuery plugins that have already been loaded.

Ok I’ve determined that it is happening, but why is my site calling jQuery twice?

Generally, this happens because your theme or other plugins you are using are calling jQuery but are not calling it in the correct WordPress way.

WordPress has a function called wp_enqueue_script, which is the correct way to call jQuery (or any other commonly used script). What this function does is check if jQuery is already being used, and if so it doesn’t call it again.

Ok, so where is this call being generated so I can delete it?

Well that depends if it is being called by your theme or by another active plug in. If it is being called in your theme it will most likely be in your header.php file or your footer.php file, so have a look for a line that looks like this (insert image)

Now the beginning of the line may look different but what is important is the jquery/jquery bit. So if you find that line delete it and use the wp_enqueue_script() function in your themes functions.php file.

If the call is coming from one of your plugins then it may be that the easiest thing to do is to turn off all your plugins and then turn them on one by one, each time checking your page source to see if that duplicate jQuery comes up. When you find the plugin causing the problem simply not deactivating it would be the easiest solution. However, if you really want to use the plugin it might be worthwhile contacting the plugin author and asking them to fix their plugin so that they include scripts correctly. Or, you could just try and find where it is being called using the technique described above.

Its also worth noting that even though jQuery is usually the script that is included twice, there could also be other scripts included twice that could be causing problems.

Another technique for finding duplicate scripts is by using the scripts section of Firebug plugin for Firefox. Just click on the script drop down and you can see a list of all the scripts that have been loaded in. From there you can check if there are any duplicates.

Hopes this helps
Cameron