How to get User Control ID and apply jQuery .click() function in asp.net

Question

I have menu like this :

 <li class="active" id="liHome"><asp:HyperLink ID="hlHome" runat="server" Text="Home" NavigateUrl="~/Default.aspx"></asp:HyperLink></li>
      <li><asp:HyperLink ID="hlRegister" runat="server" Text="Register" NavigateUrl="~/register.aspx"></asp:HyperLink></li>
      <li><asp:HyperLink ID="hlLogin" runat="server" Text="Login" NavigateUrl="~/login.aspx"></asp:HyperLink></li>
      <li><asp:HyperLink ID="hlBug" runat="server" Text="Report A Bug" NavigateUrl="~/bug.aspx"></asp:HyperLink></li>
      <li><asp:HyperLink ID="hlContactUs" runat="server" Text="Contact Us" NavigateUrl="~/contact.aspx"></asp:HyperLink></li>

Using Javascript as in header :

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= hlHome.ClientID %>').click(function () {
            alert("ok working")
             $('#liHome').removeClass("active"); // not working
        });
    });

Alert is working in click butits not removing class active from li why ? I am also using update panel. what is the silution to get it done while using update panel.

you cannot use ids directly for asp.net controls. Use CssClass or `ClientIDMode="Static"` or [More comprehensive info here](http://stackoverflow.com/a/20227176/489512) — Venkata Krishna, Jan 06 '14 at 21:27
@krishna thanks :) i was not using # in $('#') :) Thankyou . — Afnan Ahmad, Jan 06 '14 at 21:35
@AfnanAhmad see below and please let me know if you have any questions or if it is not working. I will help you. — zgood, Jan 06 '14 at 21:40
@zgood - I agree that OP doesn't need to in this particular case. but what if the hyperlinks are not part of the `ul` dom structure anymore or what if the ul's class changes? for .net controls in particular there is a specific way to target. — Venkata Krishna, Jan 06 '14 at 21:49
@zgood its not working whn page completley loads it again apply class active to first li. Kindly guide me :) thankyou — Afnan Ahmad, Jan 06 '14 at 21:55

score 0 · Accepted Answer · edited Jan 06 '14 at 22:35

0

You could maybe try something like this:

     <script type="text/javascript">
       function pageLoad() {
           var loc = window.location.href.split('/');
           var page = loc[loc.length - 1];
           $('ul.nav a').each(function (i) {
               var href = $(this).attr('href');
               if (href.indexOf(page) !== -1) {
                   $('ul.nav li.active').removeClass('active');
                   $(this).parent().addClass('active');
               }
           });
       }
   </script>

For UpdatePanels I believe you can use the pageLoad function instead of $(document).ready

edited Jan 06 '14 at 22:35

Winfield

18,985
3
52
65

answered Jan 06 '14 at 21:31

zgood

12,181
2
25
26

its not working in my case. when i click a it applys active class but when page loads completley it again shows first li active . please help me ? – Afnan Ahmad Jan 06 '14 at 21:52
Just out of curiosity, are you using `UpdatePanels` ? – zgood Jan 06 '14 at 21:54
Also, `$('#liHome').removeclass("active");` is wrong it needs to be `$('#liHome').removeClass("active");` `removeClass` has a capital C in jquery – zgood Jan 06 '14 at 21:56
How to use your piece of code its just an amazing thing. I am beginner but how you worked with DOM is really impressive :) @zgood – Afnan Ahmad Jan 06 '14 at 21:58
I was using Capital C but as you raised that am I using update panel so might be because of that its creating problem. Can you please suggest me how to work with I do not want to remove my update panel @zgood – Afnan Ahmad Jan 06 '14 at 22:02
@AfnanAhmad It does get a bit tricky with `UpdatePanels`, but try the above code and let me know if you have any success. – zgood Jan 06 '14 at 22:06
unfortunately , I used your above code with page load but with no luck. @zgood – Afnan Ahmad Jan 06 '14 at 22:10
I have updated my answer, let me know if this new approach works or if you have any questions – zgood Jan 06 '14 at 22:20
when I run my project at the very first time its not showing class active to home while when i click on some menu item it works fine. But I need home to be active at very first time – Afnan Ahmad Jan 06 '14 at 22:28
thankyou so much :) I have just changed one line and now its working perfectly :) . Wao you have written an amazing code :) – Afnan Ahmad Jan 06 '14 at 22:33

How to get User Control ID and apply jQuery .click() function in asp.net

1 Answers1