Jquery id not working with runat="server"

Question

0.00/5 (No votes)

See more:

I have a mouseover function where I changed the 'span' color of my 'a' tag. I take the 'a' tag that isMouseOver and replace the text to match the 'span'. This works, until recently I needed to add functionality from the server side. Therefore, the HTML is using runat="server". This in turn, changes my 'id' and adds "ct100_" to the front of my id's. However, when I apply this text to my variables it does not function. I can create a variable with the string "#ct100_span_Messages" and it will change my text but if the variable uses '#ct100_span' + $(this).attr('id').replace('img_', '').replace('a1_', '').replace('a_', '') it comes up with "ct100_span_Messages" (exactly the same string value) but does not work. I have tried using .toString() as well with no success. Thanks for the help,

*If they do not have runat="server" and I take out the added 'ct100_' it works. I really don't understand why my string's match exactly but jQuery will not read it.

Here is the JQUERY that works
(Once I add more buttons it becomes tedious to maintain each 'id'):

JavaScript

$("a[class='NoDecoration Menu']").mouseover(function (e) {

    var selected = window.location.pathname
                   .replace('/My/', '').replace('.aspx', '');

    var hover = $(this).attr('id').replace('img_', '')
                .replace('a1_', '').replace('span_', '').replace('a_', '');

    var test = "#ct100_span_Messages";

    if (selected != "Messages" && hover == "Messages") {
        $(test).css('color', 'orange');
    }
    if (selected != "Documents" && hover == "Documents") {
        $("#ctl00_span_Documents").css('color', 'orange');
    }
});

Here is the JQUERY that doesn't work:

JavaScript

 $("a[class='NoDecoration Menu']").mouseover(function (e) {

    var selected = window.location.pathname
                   .replace('/My/', '').replace('.aspx', '');

    var hover = $(this).attr('id').replace('img_', '')
                .replace('a1_', '').replace('span_', '').replace('a_', '');

    var test = '#ct100_span_' + $(this).attr('id').replace('img_', '')
               .replace('a1_', '').replace('a_', '');

    if (selected != hover) {
         $(test).css('color', 'orange');
    }
});

Here is my HTML with the 'a' tags and 'span':

ASP.NET

<div  runat="server" id="MenuGroupMessages" class="fluidrow PaddingSized">
  <div class="MenuGroup">
        <a id="a_Messages" class="NoDecoration Menu" style="float: left">
            <img id="img_Messages" style="width: 30px; margin-top: 0%;" 
                 alt="MessageCenter" src="/Images/Mail.png" />
        </a>
  </div>
  <div style="float: left;">
        <a id="a1_Messages" class="NoDecoration Menu" style="float: left"       
           href="/My/Messages.aspx">
           <span  runat="server" id="span_Messages" 
                 class="DashboardMenuOptions">My Messages</span>
        </a>
  </div>
</div>

<div  runat="server" id="MenuGroupDocuments" class="fluidrow PaddingSized" 
     style="margin-top: 3%;">
    <div class="MenuGroup">
         <a id="a_Documents" class="NoDecoration Menu" style="float: left"
             href="/My/Documents.aspx">
             <img id="img_Documents" style="width: 30px; margin-top: 0%;" 
                  alt="MessageCenter" src="/Images/Documents.png" />
         </a>
    </div>
    <div style="float: left;">
         <a id="a1_Documents" class="NoDecoration Menu" style="float: left"
            href="/My/Documents.aspx">
            <span  runat="server" id="span_Documents" 
                  class="DashboardMenuOptions">My Documents</span>
         </a>
   </div>
</div>

Posted 18-Dec-13 6:52am

andrewster05

Updated 18-Dec-13 8:14am

v12

Add a Solution

Comments

JasonMacD 18-Dec-13 13:21pm

Once you add runat="server" to any DOM element that element can at that point no longer be used on the client side in the same manner.

andrewster05 18-Dec-13 13:30pm

Does that mean I can not reference the 'id' attribute of an element that is runat="server"?

JasonMacD 18-Dec-13 14:25pm

You can reference and no errors will be thrown but it will not work without posting back to the server.

andrewster05 18-Dec-13 15:20pm

How would I post back to the server to get this to work?

JasonMacD 18-Dec-13 15:42pm

That's my point if you want to do this client side just remove the runat="server" attribute. What else do you need to do on the server side. If it is a redirect or something that can be done in jQuery as well so it doesnt affect that behavior.

andrewster05 18-Dec-13 16:44pm

I use the .cs file to change the properties of my menu bar to show the selected a tag... If I do similar on the load with jQuery it flickers... Would you not set the properties in the .cs?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-12-18T10:44:00

Here is one important thing to understand: jQuery has nothing to do with runat="server", as well as any other server-side detail. This is a Javascrip library, that is, it works only on the client side. It only works with HTML, not ASP.NET code artifacts, which are totally unreachable from the client side. ASP.NET only generates HTML (or any other content) in HTTP response.

Here is one simple advice: load your page using any Web browser, and look at the pure HTML. To do so, use "View Page Source" from the browser's menu (or something similar, depending on your browser). Save this HTML and analyze it. This is what jQuery really works with, nothing else.

Now, you use "#ct100_span_Messages" as a jQuery id selector: http://api.jquery.com/id-selector[^].

It works for the element with the attribute id="ct100_span_Messages", and this attribute's value should be unique on your page. I don't see such attribute in your code.

In ASP.NET, you can use either fixed id attribute values immediately, or generate them on the fly, depending on your code data. Check up if you do it correctly. First, you can check it up using "View Page Source", and secondly, if you calculate the id on the server side, make sure you know how to do it correctly:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.web.ui.control.id%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.web.ui.control.uniqueid%28v=vs.100%29.ASPX[^],
http://msdn.microsoft.com/en-us/library/1d04y8ss%28v=vs.100%29.ASPX[^].

—SA

andrewster05 · Accepted Answer · 2013-12-18T11:16:00

Solution 2

I finally figured out what was wrong the strings in fact did not match as the runat="server" was adding "ctl00" to the ID when it in fact looked exactly like "ct100"... It works now and has nothing to do with runat="server"... But the dang 1 and l looked exactly the same in that font

Posted 18-Dec-13 11:16am