Debugging a jQuery plugin

Question

Background

I have a snippet of javascript that sites on customer pages. When this script is executed, it loads necessary assets and scripts and then executes the main code.

One of the script's I'm loading is Twitter's bootstrap JS to create a modal window. It's implemented as a jQuery plugin, and adds '$.modal()' to a jquery object.

Problem

This works on all but one customer site. On this particular site, as I invoke $('#idOfWindow').modal();, the page throws a javascript error Object has no method 'modal'

I've verified that the bootstrap code is invoked, and $.fn.modal is called to setup the plugin, My hunch is that something is clobbering the jQuery object, but I'm not sure how to debug this.

Comments

I'm currently using Chrome's Developer Tools to Debug, and I have verified that the plugin is loaded and executed before it's ever called. The client site is using jQuery 1.7.2. I'm familiar with chrome tools, but I'm not a power user.

Have you tried stepping through the JavaScript execution in Firebug or Chrome Developer Tools? — Kevin Boucher
– Kevin Boucher, Commented Nov 16, 2012 at 18:44
I have, is there an easy way to see when window.jQuery gets redefined? — Alan
– Alan, Commented Nov 16, 2012 at 18:47
My bootstrap script is loaded asynchronously, so I can easily break into it and see that it's set. There are a ton of javascript files loaded externally, and I'd like to not have to manually break into each one. — Alan
– Alan, Commented Nov 16, 2012 at 18:49
The site is using 1.7.2. My widget will not load jQuery if jQuery is already loaded. — Alan
– Alan, Commented Nov 16, 2012 at 18:52

gilly3 · Accepted Answer · 2012-11-16 19:05:22Z

4

If you are right, that your original jQuery object is being overwritten somewhere, you should be able to restore it with jQuery.noConflict().

Demo: jsfiddle.net/KthZu

Edit: Some debugging tips:

To help in debugging, you can check the jQuery version in the console with this code:

$().jquery

Another potential debugging trick would be to store a reference to jQuery when you create you plugin.

$.fn.myPlugin = function(){};
window.jQueryWithMyPlugin = $;

Then, when debugging, you can plainly see if window.$ has been overwritten:

$ === jQueryWithMyPlugin

edited Nov 16, 2012 at 19:05

answered Nov 16, 2012 at 18:53

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Over a year ago

BOO YAH! Okay. Looks like $ is being redefined!

Shmiddty · Accepted Answer · 2012-11-16 19:01:49Z

1

Generally for any widget type of code that is to be embedded externally, you'll want to wrap your code:

(function($){
    $('#idOfWindow').modal();
})(jQuery);

answered Nov 16, 2012 at 19:01

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

1 Comment

gilly3 Over a year ago

That's useful when only $ has been reassigned - usually by some other library. But, in case jQuery has been included twice, both jQuery and $ are reassigned. In that case, to get at the original jQuery object, you need to use jQuery.noConflict() to restore $, and jQuery.noConflict(true) if you also want to restore jQuery. Note that this is a 3rd party plugin - Alan isn't calling the plugin from the same script that created it.

zzzzBov · Accepted Answer · 2012-11-16 18:52:32Z

0

I have, in the past had issues where multiple versions of jQuery (or jQuery & prototype) were loaded on the same page. Be sure that the version of jQuery you're adding $.fn.modal to is identical to the version that's being called. $().jquery can be used to access the specific version of jQuery in use.

answered Nov 16, 2012 at 18:52

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

1 Comment

Alan Over a year ago

Is there a way to see what version is called by typing something in the javascript console?

Collectives™ on Stack Overflow

Debugging a jQuery plugin

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related