Asp.Net MasterPage and JQuery

Question

I have a jqueryscript that works with asp.net pages without masterpages. When the page gets an reference to a masterpage the script stop working.

The masterpage: Within the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

At codebehind:

protected void Page_Load(object sender, EventArgs e)
    {
        string script = "$(document).ready(function () { $(\"img[src*='help']\").click(function () { var id = $(this).attr(\"id\"); $(\"#helpviewer\").toggle(400); $(\"#helpviewer\").load(\"" + Page.ResolveUrl("~/help/help.aspx") + " \" + \"#\" + id); return false; }); });";
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), script, true);
    }

Here is the helppage that jquery loads:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="help.aspx.cs" Inherits="help_help" meta:resourcekey="PageResource1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>

    <body>
        <form id="form1" runat="server">
            <div id="helpUploadFile">
                <asp:literal id="Literal1" runat="server" meta:resourcekey="Literal1Resource1"></asp:literal>
            </div>
            <div id="helpPictureArchive">
                <asp:literal id="Literal2" runat="server" meta:resourcekey="Literal2Resource1"></asp:literal>
            </div>
            <div id="image1">
                <asp:literal id="Literal3" runat="server" meta:resourcekey="Literal3Resource1"></asp:literal>
            </div>
        </form>
    </body>
</html>

I belive my problem lies in the .load. The script is working, the helpviewer is shown up but the text is not loading.

Here is a working testpage without masterpage. and here is a testpage with the masterpage. Just click at the image to se the jquery.

Any idea whats wrong?

The .load seems to be OK, the problem must be in the masterpage itself. Could you please provide its source code? — Andrei, Oct 07 '11 at 10:05
There all the code there is in the masterpage. The only thing thats missing is using references. I have updated my question with the testpage that not working to. — Malin Palm Friberg, Oct 07 '11 at 11:33
@MalinPalmFriberg: welcome to Stackoverflow, don't forget to vote for the people who helped you and accept the best answer. That way your question might be able to help someone else later. — Brian MacKay, Oct 07 '11 at 18:16

score 1 · Answer 1 · answered Oct 07 '11 at 11:56

When you generate JavaScript on the server side, you should use the control's ClientID property and not the ID property. The same goes for the client side:

var control = document.getElementById('<%=controlid.ClientID%>');

On the server side:

@"<script .....
 var control = document.getElementById('"+controlid.ClientID+"');";
 // etc
 ";

score 1 · Accepted Answer · edited May 23 '17 at 12:12

IDs in master pages (or any other container) get mangled due to the way naming containers work, so I like to reference my server controls using jQuery's ends with selector:

$("[id$='MyControlName']");

Since the mangled IDs always have the control name on the right, this just works. The mangled ID would look something like this: MasterPage1_ctl02_MyControlName

I've seen some people criticize this approach as relatively slow compared to concatenating in Control.ClientID, which is how I used to do it. But avoiding Control.ClientID means you can store your JavaScript in a seperate file, which is a best practice. Sometimes, if you're getting extremely dynamic, doing JS on the server is unavoidable. But in a seperate file you've got better seperation of concerns, and Visual Studio gives you some intellisense, and so on.

Here's a related question: jQuery Selector: Id Ends With?

More about naming containers: MSDN Article

score 1 · Answer 3 · answered Oct 07 '11 at 12:49

1

When you use a master page, all nested controls (which is basically all of them) get their IDs changed.

If you are using asp.net 4.0 or greater, you can add ClientIdMode="Static" to your controls, and they will not change IDs when you use a master page.

answered Oct 07 '11 at 12:49

Sean McMillan

10,058
6
55
65

+1 This will probably work, but it might be easier to use `ClientID`. – James Johnson Oct 07 '11 at 20:40

score 0 · Answer 4 · answered Oct 07 '11 at 11:05

0

I can suppose that when you move your page into MasterPage, all id attributes on your page would be changed (asp.net add for it some prefix in the case when you use Master page). But your "~/help/help.aspx" page possible don't know about this, so js script cannot find text on that page.

answered Oct 07 '11 at 11:05

apros

2,848
3
27
31

I have copy and past the code for help.aspx into my original question. If it's helps. – Malin Palm Friberg Oct 07 '11 at 11:31
You right! :) Thank you for pointing it out to me. The id is wrong. Do you have any sugestion how to solve the problem? – Malin Palm Friberg Oct 07 '11 at 11:42
make your image element as server control (add atrr runat="server") and define inside your script var id = '<%= Image1.ClientID %>'; – apros Oct 07 '11 at 12:58

Asp.Net MasterPage and JQuery

4 Answers4