The ideal way to solve the problem of jQuery libraries thrown off is simple, but it’s also a pain in the ass. In the previous post, we saw how conflicting jQuery libraries can cause problems. That example was a site that was running a plugin with a previous version of jQuery hardcoded in, which was creating HTML errors that didn’t point directly to the jQuery issues.
To solve a challenging issue like this, we don’t get fancy, we just roll up our sleeves and show our true colors: we’re nerds, and we know way too much about WordPress for our own good.
Take all the code and copy it into an HTML file, start going through the code, cutting pieces of suspect code and publishing. More than likely, there will be plenty of code that you can cut out before you cut out the culprit and see the error go away. Put the code back in in order to verify that you’ve found the right snippet. Once you’ve isolated the right code, you’re ready to roll.
Excerpted from the actual Support Ticket between Jason Cohen and our customer.
I found it! It’s the JQuery library.
If you use this, it works: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
If you use this, it doesn’t work: http://[awesomewebsite].wpengine.netdna-cdn.com/wp-includes/js/jquery/jquery.js?ver=1.6.1The reason is that in Google’s version it defines ‘$’ as a function, and in the other it does NOT define that.
So… ANOTHER way to fix it is to use “jQuery” instead of ‘$’ in that function that’s failing. That’s the fastest.
Phew!
What I did was copy your html into a static html file on my laptop so I could reproduce the problem. Then I stripped out javascript piece by piece until I was left with just a little, and still reproduced the problem.
At that point I could replace the ‘$’ with jQuery and it fixed the problem. And same with switching out the jQuery bit.
I’ve attached that file.
Okay Jason, this is totally resolved. Thanks for all of your help on this.
It was something else on the page. Another jquery library is being called in the footer. If that was removed, everything worked just fine. However, on removal it broke other items on the site. I’ll debug this later, but my fix for now was to move all the scripts to the footer.
There ya go, guys. Let us know if you ever run into a similar issue. We’re here to help!
Also, we’re going to continue posting content like this Monday and Wednesday every week. You can get these posts in your email with the Feedburner link up top so you don’t have to remember to check back twice a week. ALSO, let us know if you have a tip you want us to post.
This is a pretty cool post, in that you’re showing perhaps more inexperienced developers how to troubleshoot annoying JS-based problems.
I have to take issue, though, with the suggestion that the problem was the use of the wrong jQuery library. I’ve run into this problem quite a few times myself, where, when porting jQuery code into a WP-Powered site, it breaks, with no easily discernible reason as to why… at first.
At first, I just switched to the google cdn version as well, but because of my lack of knowledge, the google cdn version was being loaded both on the front-end and the back end. This broke the drag-and-drop system in WP-Admin and cause problems with page/post management as well.
The recommended solution, as seen here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
Is to ensure that any plugins, theme javascripts, etc are complying with the jQuery.noConflict wrapper… that’s why using jQuery( … ) was working where as $( … ) was not… if you inspected the element using firebug or chrome element inspector you would see clearly in the error log that ‘$’ is undefined. Easy fix?
use a jQuery noConflict wrapper in your code to redefine the ‘$’ used in client-code… e.g.: `jQuery( document).ready(function( $ ) {});` ( note the ‘$’ in the anonymous function being passed to ready() )
If THAT still doesn’t work, the theme functions.php file should be edited to de-register the core WP provided jQuery and register the google CDN version. wp_deregister_script and wp_register_script/wp_enqueue_script respectively.
Thanks for the great article, and for letting me add my two cents!
– Greg J