jQuery undefined in content page when using master pages which has jQuery reference

Question

I have a nested master page. A parent master page, a child master page and a content page whose master page is the child master page. I have a reference to jQuery in the parent master page in the head section.<script type="text/javascript" src='<%#ResolveUrl("~/includes/jquery-1.4.2.min.js") %>' ></script> & Page.Header.DataBind(); in the OnLoad event.

I am using jQuery in all the pages including the master pages. However I am getting "Error: $().ready is not a function" in the content page. If I include jQuery reference in the content page it works.

Question: If the reference to jQuery is in the master page head section, why aren't the content pages able to use jQuery? When I do view source, the script tag with jQuery is there and it works.

The master pages and content page are merged during rendering and sent to the browser as a single html page so I am not sure when master pages are used, jQuery references break.

UPDATE:

When I changed '$.ready(function()' to 'jQuery(document).ready(function($)' it worked! I am not loading any other javascript libraries and I am not using MS Ajax.

Answer 1

First, and I didn't notice this before, but is your original call to $.ready(function() {}), which didn't work, but jQuery(document).ready(function() {}) did work? Does your call work if you use $(document).ready(function () {} )? Just wanted to make sure it's not a typo. The jQuery docs say the $.ready(function() {}) is valid, but it's not recommended.

OK, assuming it's not a typo, it definitely sounds like you have a conflict with the '$' variable. If you're using third-party controls or ASP.NET AJAX, you may run into conflicts (even though you may not be including the JS file explicitly).

If you could post what gets output by the browser after your page loads, that would help.

Also, if you run Fiddler (or some other traffic request tool), you can see if any JS references are being downloaded. Look not only for .JS files, but also .AXD files (some third-party tools name these files ScriptResource.axd or WebResource.axd, and they may redefine the '$' variable).

You may want to check out this link on the jQuery API page about the noConflict function. This helps when you have a conflict with the $ variable.

Without seeing the output, it's tough to diagnose. But hopefully this helps.