0

I have a navigation with 2 buttons, when clicking a button it loads a new page (new page load), when clicking the button, a class with classname selected should be added... It does that partially - It add's the class, but when it loads the new page, the class is removed again? How do I make the class stick to what the user has clicked?

$(document).on("click", ".list-mode button", function () {
    $(".list-mode button").removeClass("selected");
    $(this).addClass("selected");
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • 3
    You can't. Javascript does not persist state. You will need some form of storing which value was selected across HTTP requests (cookies, database, local storage...) – Rory McCrossan Feb 18 '13 at 09:16
  • You'll have to remember the class on the server, and write it back while displaying the next page – Salman Feb 18 '13 at 09:17
  • Ok, thx for the answer - I solved it by using LocalStorage to save the users click –  Feb 18 '13 at 09:26

2 Answers2

2

If you're navigating to a new page, changes you've made using JavaScript to the current page aren't going to appear in the new one. You really have three options:

  1. Add the correct class to the correct element in the HTML of the new page using server-side code.
  2. Add the correct class to the correct element using JavaScript in the new page; you'll need a way to determine which element the class should be added to (possibly part of the URL of the new page).
  3. Use AJAX navigation, and rather than loading a completely new page simply load the new content and replace part of the already loaded page.
Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
  • There's the cookie option as well. – T.J. Crowder Feb 18 '13 at 09:19
  • @T.J.Crowder Sure, cookies could be part of the implementation of either option 1 or 2. I don't think there a separate option all of their own though; you still have to *use* the cookie. – Anthony Grist Feb 18 '13 at 09:22
  • Option 2 here would be my preference. This answer may help with that: http://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript – daveyfaherty Feb 18 '13 at 10:25
0

You need cookies or DOM storage for this.

Whenever the page is going to be abandoned, you need to store somewhere what the user did last time and initialize the whole buttons with the stored settings.

As you're using jQuery, handle the document.ready event and initialize there the buttons whenever the page is loaded:

$(document).ready(function() {
   // Initialize the whole buttons
});
Matías Fidemraizer
  • 63,804
  • 18
  • 124
  • 206
  • *"You need cookies or DOM storage for this."* Not necessarily, as Anthony pointed out, you could send the information to the server and persist it there. – T.J. Crowder Feb 18 '13 at 09:24
  • @T.J.Crowder I prefer to store this in the browser rather than in some _server session state_. We don't know the actual underlying requirements. I mean: maybe this "tracking" can dead whenever the user leaves the website so why using the server memory for something like this? – Matías Fidemraizer Feb 18 '13 at 09:27
  • @ Matías: Right. But "need" is a very strong word, it excludes other possibilities. – T.J. Crowder Feb 18 '13 at 09:31
  • @NickyChristensen Well, when I gave you the hint of _DOM storage_ I was talking about _local storage_. I'm glad you got the right solution! – Matías Fidemraizer Feb 18 '13 at 09:32
  • @NickyChristensen Now I see you checked another answer as the right one. While it's up to you to choose what you liked more, I believe that, if you solved your problem using _local storage_, this is exactly what I pointed out in my answer. – Matías Fidemraizer Feb 18 '13 at 09:34