Question

So I had code that was working properly on my site:

$("#usr").load("somepage.php",{var1:var1,var2:var2});

But ever since I changed some code in the navigation bar, jQuery has been acting really strangely. The first major problem was that this line:

var w = $(window).width();

returns the error: object [global] has no method "width()"

And that didn’t seem to matter, as all elements on the page functioned with that error (as if it was still being executed, because elements were still being placed)…but then I came to the page that implemented the first line of code, and I ran into the following error:

Cannot call method "load()" of null

Sure enough, I checked the console, and $(“#usr”) returns null, but I can see the HTML line in the page with the inline id of usr.

This causes a problem because I need to load data from that page for the page to function properly. But it gets even stranger. I thought I would just try a plain post request and take the data and use document.getElementById("usr").innerHTML = ... as a substitute, but I get the following error from this line:

$.post("somepage.php",{var1:var1,var2:var2},function(data){
    document.getElementById("usr").innerHTML = data;
});

Error:

Uncaught TypeError: Object function $(el){if(!el)return null;if(el.htmlElement)return Garbage.collect(el);if([window,document].contains(el))return el;var type=$type(el);if(type=='string'){el=document.getElementById(el);type=(el)?'element':false}if(type!='element')return null;if(el.htmlElement)return Garbage.collect(el);if(['object','embed'].contains(el.tagName.toLowerCase()))return el;$extend(el,Element.prototype);el.htmlElement=function(){};return Garbage.collect(el)} has no method 'post'

What the heck is going on with jQuery?

I’m importing 1.8.2 from googleapis

Answer 1

That sounds a lot like you’re loading Prototype or MooTools or something as well as jQuery, and so Prototype/MooTools/whatever is taking over the $ symbol.

If that’s what’s going on, and you need the other library, you can use jQuery.noConflict(). Then you either use the symbol jQuery instead of $ for your jQuery stuff, or you put all of your jQuery code into a function that you pass into jQuery.noConflict and accept $ as an argument, like so:

// Out here, $ !== jQuery
jQuery.noConflict(function($) {
    // In here, $ === jQuery
});

Or you can just do it yourself:

// Out here, $ !== jQuery
jQuery.noConflict();
(function($) {
    // In here, $ === jQuery
})(jQuery);

ready also passes the jQuery object into the function, if you’re already using ready.