Generated serve IDs are having issues when trying to use tabs

I am encountering an issue with my 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");
    });
  });

This jQuery code is being applied to the following HTML structure:

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

The problem arises when I use the attribute 'runat="server"' in my HTML code. Without it, everything works fine. I know that the ID changes when using this attribute, but as seen in the jQuery above, I have accounted for this by using the server-generated ID.

Although I could optimize the code, my primary concern is getting it to work correctly first.

Can anyone offer insight into what else might be causing this issue?

Thank you.

jqueryasp.netcss

Answer №1

To assign the ClientID to the variable orderId, you can use the following code snippet:

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

Make sure to enclose the value of ClientID in quotes to treat it as a string literal, as shown below:

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

Instead of utilizing this variable, the code attempts to access an element named orderId using jQuery selectors with hard-coded strings:

jQuery("orderId")

and

jQuery("#orderId")

To correctly reference your variable, use:

jQuery(orderId)

For better accuracy when working with identifiers in selectors:

jQuery("#" + orderId)

You may consider prefixing the variable value with "#" for each usage depending on your total requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align a box once another one has been placed?

I have integrated both Bootstrap and Masonry plugins into my website design. The issue I am facing is that the Masonry plugin box goes under the top Bootstrap bar. I tried adding a margin-top: 50, but this resulted in a horizontal scroll bar appearing. To ...

javascriptjquerycsstwitter-bootstrapgrid

What is the process of connecting marionette rendered views to the DOM?

I am encountering a challenge with my simple setup using Marionette that I am trying to resolve. My issue lies within a view containing a collection: var MyItemsView = Marionette.View.extend({ template: "#some-template" }); var view = new MyItemsVie ...

javascriptjquerytemplatesbackbone.jsmarionette

Mismatched heights of grid elements

Currently, I am utilizing Tailwind CSS V3 and struggling to set the consistent height of grid items. The only way I can achieve uniform height is by assigning them a height of h-96. However, when I attempt to use breakpoints such as lg:h-80 and md:h-96, th ...

htmlcsstailwind-css

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Switching iframe content based on screen size

I'm attempting to use jQuery to dynamically change the source, width, and height of an iframe based on the viewport width. Here is the code I currently have: <head> <script type="text/javascript"> $(document).ready(function() ...

jqueryiframeresponsive-design

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

htmlcsstwitter-bootstrapbutton

Troubleshooting a JQuery accordion malfunction within a table

I am populating the data dynamically. However, the Accordion feature is not functioning correctly. JSFiddle link http://jsfiddle.net/aff4vL5g/360/ Please note: I am unable to modify the HTML structure. Current table Desired output The first accordio ...

javascriptjqueryhtmlcssaccordion

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes. After going through the documentation, I came across the customized classes h-75 and h-25 provi ...

htmlcssvue.jsbootstrap-4

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

"Troubleshooting the ERR_SPDY_PROTOCOL_ERROR issue with Ajax and .NET Web

Encountering a perplexing issue while attempting to make Ajax calls to a .NET Web Api hosted on IIS on Microsoft Azure. After properly applying my SSL certificate from Let's Encrypt to the website, an error arises when trying to execute an ajax call: ...

jqueryajaxazuressliis

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

htmlcss

I need to be able to access the index.php page whether I am logged in or not, but with the option to enter

I am having trouble with managing sessions. I want my index page to be accessible whether a user is logged in or not. If a user is logged in, I would like to display a logout button instead of the login and sign up buttons. If not logged in, then the login ...

phpjqueryajax

A self-executing JavaScript function

Whenever I click on a , I would like to show a personalized alert, but if I am already logged in, I prefer to be directed to a different page. Here is what I have set up. <div id="contentCalendar" class="col-md-3 images_1_of_4 text-center"> ...

javascriptphpjquery

Ensuring Consistent Spacing Between Elements When Dealing with Varying Image Lengths

In order to clearly illustrate my need, I will provide some code here. .wrap{ display:flex; flex-direction:row; align-items: center; justify-content: flex-start; width: 100%; } .img{ width: 30px; height: 20px; background: red; } .img1{ ...

htmlcss

Adjusting the dimensions of a Bootstrap modal containing a YouTube video

Here is the code snippet I am working with: <div id="MainV3_VideoModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-b ...

cssbootstrap-4bootstrap-modalbootstrap-5

Tips for reviewing the member.createuser audit log

Within my ASP.NET application, the Membership feature is activated, allowing users with an Administration Role to create additional users with various roles. I am interested in implementing an audit log system to track user creation, specifically noting wh ...

asp.net

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

javascriptjqueryhtmlcsspreloader

Accessing information from an ASP.NET web service through an Ajax request in AngularJS

UPDATE: included additional methods for clarity enhancement I am attempting to fetch data from an ASP.NET webservice in C# using Ajax calls in AngularJS. The webmethod is structured as follows: [WebMethod] public User getUserByEmail(String Email) ...

c#jqueryasp.netajaxangularjs

What could be causing this code to malfunction in Internet Explorer 7?

Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...

htmlcssinternet-explorer-7