How to use jQuery scripts with MasterPage/Content page scenario?

Question

I have created a great stand-alone web form in asp.net utilizing many jQuery features and CSS. It works fine. When I re-create it as a web content form as part of a MasterPage, my jQuery and javascript is completely ignored.

I am referencing the pertinent jQuery and CSS in my of the MasterPage. I have a content placeholder at the bottom of the masterpage called "ScriptContent". In my content page, this is where I plug in the various jQuery methods and javascript.

When I view the page source everything is there. However, it's all being ignored so to speak. What am I doing wrong?

Answer 1

I would match the source output of the working version against the output of the non-working version.

Obviously, there's something being rendered out from ASP.NET differently. Getting the difference would tell you what.

Since I have no details, I can only guess...but it sounds like you may have left out some $(document).ready() type functionality to kick off your script somewhere.

Answer 2

Probably the issue is that when your page is loaded as a content page within a masterpage, the ids of all of the elements are altered to reflect what content page they are in. Thus the ids you are using in jquery won't work.

Options I can think of include:

• setting the ids used by jquery programatically from asp.net code (using the clientId of the element)
• having your jquery selectors reference some other attribute of your element, such as class (which is unfortunately a bit slower)