maintain state in jquery function when page refreshes

mikha
mikha used Ask the Experts™
on
I have an asp.net web forms website with master page and few other pages.

In master page, i have <asp:ContentPlaceHolder ID=“Placeholder1” runat=“server”></asp:ContentPlaceHolder> , where the content of the child pages are loaded.

one of the page is default.aspx ,, as such

<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”></asp:Content>

I want to change default.aspx , such that I have a side menu column and a content column. Aslo I have a anchor tag. I wrote a javascript/jquery function as such on documen t ready

$("#togglemenu").on(click, function(){
    $("sidemenu").toggle("slow");
}

the toggle works, but in the main content section , i have a table and can increase the size of the rows displayed in the table, when I change the pagenumber or change the number of items displayed in the table, the page refreshes and it doesn't maintain what state the sidemenu was in . I.e even if the menu was hidden, when i change the page number, the page refreshes and side menu appears . I want it to be hidden , if the user had hidden the menu and then changed the page number.

how can i achieve this in asp.net web forms.


<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”>

<a >  <span id="togglemenu" > Hide menu </span></a>
<div id="sidemenu">
</div>

<div id="main content"> </div>

</asp:Content>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Mikha,

You will have to use a persisted storage to make that happen. Your choices are:
1. SessionState
2. ViewState
3. HiddenField
4. WebStorage

Choose one, store all the settings that you make on the page(for example, if a menu is being shown or hidden, store its state in any of the above one), every time your page loads read those values back again, call necessary functions so that they are reflected on the page properly and you are good to go.

Regards,
Chinmay.
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Also, I am wondering, why you are not using AJAX? that way only part of the page will reload/change.

Author

Commented:
Do I use update panels for enabling Ajax?
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Yupp.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
My preference would be localstorage. Create a state model and stringify it to localStorage. When the page loads read it back again.

$(function() {
  var state = JSON.parse(localStorage.getItem('state') || '{"sideMenu": false}');

  // SET YOUR MENU BASED ON THE STATE RETRIEVED
  if (state.sideMenu) {
    $('#sidemenu').show();
  }

  $("#togglemenu").on(click, function(){
    // ASSUMING YOUR sidemenu IS TARGETD BY ID - YOU LEFT THE
    // ID (#) CLASS (.) PREFIX OUT
    $("#sidemenu").toggle("slow");

    // IS SIDEMENU VISIBLE
    state.sideMenu = $('#sidemenu').is(':visible');

    // SAVE STATE
    localStorage.setItem('state', JSON.stringify(state));
  }
});

Open in new window


If you are only interested in the state of the Side Menu you could also store this value in a cookie.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial