Question

I have this jQuery file

   jQuery(document).ready(function() {        
     var orderId= <%= OrderLi.ClientID %>;

    jQuery("#ApprovalTab").css("display", "block");
    jQuery("#ApprovalLi").css("background-color", "#5EA8DE");
    jQuery("#ApprovalLi a").css("color", "#FFF");
    jQuery("#OrdersTab").css("display", "none");
    jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");

    jQuery("#ApprovalLi").click(function() {
        jQuery("#ApprovalTab").css("display", "block");
        jQuery("#ApprovalLi").css("background-color", "#5EA8DE");
        jQuery("#ApprovalLi a ").css("color", "#FFF");
        jQuery("#orderId a").css("color", "black");
        jQuery("#Arrow").css("margin-left", "15px");
        jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");
        jQuery("#orderId a").css("border-bottom", "3px #D8D9DC solid");
        jQuery("#orderId").css("background-color", "#F0F1F4");
        jQuery("#OrdersTab").css("display", "none");

    });

    jQuery("orderId").click(function() {
        jQuery("#ApprovalTab").css("display", "none");
        jQuery("#OrdersTab").css("display", "block");
        jQuery("#Arrow").css("margin-left", "112px");
        jQuery("#orderId").css("background-color", "#5EA8DE");
        jQuery("#orderId a").css("border-bottom", "3px #5EA8DE solid");
        jQuery("#ApprovalLi a").css("border-bottom", "3px #D8D9DC solid");
        jQuery("#ApprovalLi").css("background-color", "#F0F1F4");
        jQuery("#orderId a").css("color", "#FFF");
        jQuery("#ApprovalLi a").css("color", "black");


    });

    jQuery("#orderId").hover(function() {
        jQuery("#orderId a").css("border-bottom", "3px #5EA8DE solid");
    });

    jQuery("#ApprovalLi").hover(function() {
        jQuery("#ApprovalLi a").css("border-bottom", "3px #5EA8DE solid");
    });
  });

It is applied to this:

<ul class="etabs">
<li id="ApprovalLi"><a href="#stopAtTop">Approval </a></li>
<li id="OrderLi" runat="server"  ><a href="#stopAtTop">Orders</a></li>
</ul>

If I don’t use runat=”server” code works just fine, but when I use it, code doesn’t render. I’ve searched something on the Internet, but the only thing I found about this was ‘the ID is changing’. I already knew that and you can see in the jQuery above that I am using the server ID.

btw: I know I could optimize the code above, but I want it to work firstly.

What else could be the problem ?

Thank you.

Answer 1

You set the variable orderId to the ClientID using:

var orderId= <%= OrderLi.ClientID %>;

The value of ClientID will need to be enclosed in quotes to make it a string literal, though (initially missed this, thanks to Yuriy), otherwise this in itself would cause problems:

var orderId= '<%= OrderLi.ClientID %>';

But then don’t seem to utilise that at all, and instead try to access some orderId thing using two other methods, both of which use hard-coded string literals in the jQuery selectors:

 jQuery("orderId")

and

 jQuery("#orderId")

Now the first is looking for an element (or rather all elements of) orderId and the second for an element with an identifier of "orderId". Therefore, it’s entirely incidental that your code just works without runat="server" and seems to break upon adding runat="server".

What you want is to actually use your variable:

jQuery(orderId)

And to be more accurate, given that you’re working with identifiers in the selector:

jQuery("#" + orderId)

It might be more useful prefixing the variable value with the hash instead of each usage (depending on total usage).