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.

Answer 1

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