Jquery toggle should expand after Page reload

Question

I wrote below code for Collapse/Expand some section. It is working fine. Finally If I click "Save" button and I am re-loading page again in asp.net. So then sections are going default Colleapse again. I need them back to expand. How can I do that?

$(function() {
       $('tr.subCategory')
           .css("cursor", "pointer")
           .attr("title", "Click to expand/collapse")
           .click(function() {
       $(this).siblings('.RegText-' + this.id).toggle();
           });
           $('tr[@class^=RegText-]').hide().children('td');
   })

Answer 1

You can save state using:

• URL hash: mysite.com#a=1,b=2 ...or however you want to record your state.
• Cookies
• Window.name

On reload, check for the recorded state, parse it and re-execute it in your code.

Edit:

When you execute something that changes in the UI you need to record this action somewhere (i.e. Panel A is open), in some sort of code. It could be name, value pairs (ID,STATE|ID,STATE..etc) in a string or whatever you choose. You then need to program a mechanism that takes this "saved state" information and re-initializes the UI back to where it was.

Once you've accomplished a way to represent and re-initialize the state, you have to consider how you'll save and retrieve it.

You can save it is a cookie, if it's not too big. When the page loads, check for the cookie and parse the data and run your re-initialization routine to restore the UI.

Another persistent place to stash data is in window.name, which can hold a string of up to 2mb. Same deal as a cookie.

The third method is to store the state information in the URL: document.location = document.location + "#" + stateData. You can then parse what's in the URL to grab your state data.

The "url/hash" method is becoming the preferred technique as it allows bookmarking and is a new specification to allow search-bots to read ajax-based sites easily.

See: http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/specification.html

Answer 2

you could use an hidden div field, and modify your js to set the hidden text to the id of the expanded field on click. Your function could check the value of the hidden text and show the field that matches the hidden text id.

in your page:

<div class="hidden" style="display:none;" />

in your .js

$(function() {
       $('tr.subCategory')
           .css("cursor", "pointer")
           .attr("title", "Click to expand/collapse")
           .click(function() {
       $(this).siblings('.RegText-' + this.id).toggle();
               $('.hidden').text(this.id); // set the hidden field to the id shown
           });
           $('tr[@class^=RegText-]').hide().children('td');
           $('#' + $('.hidden').text() + ''').show(); // show the id set in hidden field
   })

Answer 3

If you are using update panels you can make us of the fact that jQuery's $(document).ready is called only on the initial load and ASP.NET AJAX's pageLoad() is called for every postback. You could collapse your section in $(document).ready so it's initially hidden and then assign the click handler in pageLoad() so users can still collapse it again if they need to after the save.

$(document).ready(function() {{
    $('tr[@class^=RegText-]').hide().children('td'); 
}});

function pageLoad() {
    $('tr.subCategory').click(function() {                                  
        $(this).siblings('.RegText-' + this.id).toggle();
    });        
}