Problem with saving jquery previous state after postback

Question

0.00/5 (No votes)

See more:

Ok heres my problem,heres my html

XML

<ul>
     <li class="current"><a href="Default.aspx" id="1">1</a></li>
     <li ><a href="Default.aspx" id="2">2</a></li>
     <li ><a href="Default.aspx" id="3">3</a></li>
 </ul>

1st i wanted to change class of list item on click, which i managed to do with jquery code below:

XML

<script type="text/javascript">
           $(function () {
               $('li').click(function () {
                   $("li.current").removeClass("current")
                   $(this).addClass('current');
               });
           });
   </script>

All i wanted was to remove current class from one li and add it on li that was clicked..
but problem happens when i click on link...current class goes back on default spot (1st li).
Is there a way to keep class on li it was on before clicking on link???
-----------------------------------------------------------------------------------------------

Heres what i want to do:
I have a navigation, once link is clicked i need to redirect user to other page, but i want to save class in li that was clicked and remove it from other li (for example default place of class Current is on first LI (Home), when user click on other link (lets say Health) i need to redirect him on other page, remove class from first LI(Home), and assign it to li that was clicked(Health)) i hope u understand my whole problem now. Problem occurs once redirect happens...btw this code is on my master page...

Heres my HTML:

XML

<ul>

                    <li class="current"><a href="Category.aspx">Home</a></li>

                    <li><a href="Product.aspx?CategoryID=39">Health</a>

                        <ul>
                            <li><a href="Product.aspx?CategoryID=1">Product 1 shown once u hover li in navigation</a></li>
                            <li><a href="Product.aspx?CategoryID=2">Product 2 shown once u hover li in navigation</a></li>
                            <li><a href="Product.aspx?CategoryID=3">Product 3 shown once u hover li in navigation</a></li>
                        </ul>

                    </li>
                    <li><a href="Product.aspx?CategoryID=40">Childrens</a>
                        <ul>
                            <li><a href="Product.aspx?CategoryID=21">Product 1 shown once u hover li in navigation</a></li>
                            <li><a href="Product.aspx?CategoryID=22">Product 2 shown once u hover li in navigation</a></li>
                            <li><a href="Product.aspx?CategoryID=23">Product 3 shown once u hover li in navigation</a></li>
       
                           
                    <li><a href="Product.aspx?CategoryID=41">Women's health</a>
                         <ul>
                            <li><a href="Product.aspx?CategoryID=26">Product 1 shown once u hover li in navigation</a></li>
                            <li><a href="Product.aspx?CategoryID=27">Product 2 shown once u hover li in navigation</a></li>
                      
</ul>

That Jquery code above removes class of an li and assing it to other, but once redirect occurs its lost...Any ideas how to make it work?

Posted 8-Mar-13 12:33pm

Milos12

Updated 9-Mar-13 0:49am

v2

Add a Solution

4 solutions

Solution 1

Try this:

XML

<ul>
  <li class="current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

<script type="text/javascript">
  $(function () {
    $('li').click(function () {
      $("li.current").removeClass("current");
      $(this).addClass("current");
      return false;
     });
   });
</script>

That will remove the "current" class from the old item, and add it to the clicked item. However, this may not be what you are after, as it appears you may be trying to build a navigation menu.

Since I'm not sure what you are trying to do, I won't go into too much detail, but I will tell you that this is probably not what you're after. Consider that this the technique I am showing does not actually navigate anywhere (the "return false" prevents the navigation from occurring). Also note that the navigation shown in your example is not a "postback"... you are just navigating to the page fresh (at a lower level, the difference is a "GET" vs a "POST" operation, but that's probably more technical than you need to know).

If you want to know a better approach, maybe explain what you are really trying to do and perhaps we can give you some ideas for how to accomplish that.

Posted 8-Mar-13 14:25pm

AspDotNetDev

Comments

Milos12 9-Mar-13 6:34am

Well, first of all thx for reply, your right, im trying to build navigation, so your solution is not working for me.I tried to simplify things a little bit in question above, but ill update question with my full problem...

AspDotNetDev 11-Mar-13 1:34am

I don't have time to answer this right now, but I'll give you a couple pointers to lead you in the right direction. First, you need a way for each page to identify the selected LI. Looks like you can use the "CategoryID" from the query string for that (Google "JavaScript query string"). Then you can put a class on each LI that identifies it with the same number as the CategoryID (e.g., "li class='item_22'"). Also, don't run the JavaScript on the click event... any DOM attributes will be lost when the page navigates. Instead, run it when the page has finished loading.

Solution 3

but:

XML

<ul>
  <li class="current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

<script type="text/javascript">
  $(function () {
    $('li').click(function () {
      $("li.current").removeClass("current");
      $(this).addClass("current");
      return false;
     });
   });
</script>

not working if calling master page :

Posted 6-Oct-13 4:21am

aspdotnetkhan

Comments

André Kraak 6-Oct-13 11:27am

Posted a comment to solution as a solution:
I think you intended to comment to a solution, but created a solution instead.

If you have a question about or comment on a given solution use the "Have a Question or Comment?" option beneath the solution. When using this option the person who gave the solution gets an e-mail message and knows you placed a comment and can respond if he/she wants.
Please move the content of this solution to the solution you are commenting on and remove the solution.

Thank you.

Solution 4

For those that are having this issue with MVC or ASP.NET Master Pages. You can identify your anchor(or whatever control) in jQuery and set it's click function to capture it's ID, store it in localStorage, then retrieve it after the postback. Here's an example.

/*-------------------------------------------------*/
  /* = Menu Click Event Change li Class to Current
  /*-------------------------------------------------*/
  $(function() {
      $('ul#navlist li a').click(function() {
          localStorage.setItem('thisLink', $(this).parent().attr("id"));
      });

      var thisLink = localStorage.getItem('thisLink');
      if (thisLink) {
          $('#' + thisLink).addClass('current');
      }
  });

HTML

<ul class="sf-menu clearfix" id="navlist" >
                         <li id="liHome"><a href="/Home/Index">Home</a></li>
                         <li id="liAbout"><a href="/Home/About"> About Us</a></li>
                         <li id="liServices"><a href="/Home/Services">Services</a>
                             <ul class="sub-menu">
                                 <li><a href="#">Disease Managment</a></li>
                                 <li><a href="#">Diagnostic Services</a></li>
                                 <li><a href="#">Preventative Services</a></li>
                                 <li><a href="#">Exams</a></li>
                             </ul>
                         </li>
                         <li id="liHealth"><a href="/Home/YourHealth">Your Health</a>
                             <ul class="sub-menu">
                                 <li><a href="#">Wellness</a></li>
                                 <li><a href="#">Resources</a></li>
                             </ul>
                         </li>
                         <li id="liPatients"><a href="/Home/ForPatients">For Patients</a></li>
                         <li id="liContact"><a href="/Home/Contact">Contact Us</a></li>
                     </ul>

So in essence, you assign an ID to each li in your list, then look it up on the click event, store it in localStorage, then retrieve it after the postback. Works great for me!

Posted 18-Dec-13 3:59am

bigmike4d

Updated 18-Dec-13 4:03am

v3

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)

AspDotNetDev · Accepted Answer · 2013-03-11T12:56:00

Here is an answer corresponding to your updated question:

ASP.NET

<%@ Page Language="C#" %>

<!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>Navigation Sample</title>
    <style type="text/css">
      .current
      {
        background-color: #8888FF;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript">

      // On page ready...
      $(function () {

        // Highlight current menu item.
        var catId = '<%= Request.QueryString["CategoryID"] ?? "0" %>';
        $("li.category_" + catId).addClass("current");

      });

    </script>
</head>
<body>
    <ul>
      <li class="category_0"><a href="Product.aspx">Home</a></li>
      <li class="category_1"><a href="Product.aspx?CategoryID=1">1</a></li>
      <li class="category_2"><a href="Product.aspx?CategoryID=2">2</a></li>
      <li class="category_3"><a href="Product.aspx?CategoryID=3">3</a></li>
      <li class="category_4"><a href="Product.aspx?CategoryID=4">4</a></li>
    </ul>
</body>
</html>

Basically, you use the query string to detect which LI to add the "current" class to.