www.webdeveloper.com
Results 1 to 9 of 9

Thread: How to persist collapse (show/hide) state of toggle() with LocalStorage

  1. #1
    Join Date
    Dec 2012
    Posts
    8

    How to persist collapse (show/hide) state of toggle() with LocalStorage

    Hi,

    I have a form that use this collapse.js to show/hide fieldsets with toggle(). Those who are familiar with Django will recognize this function because its exactly the one used in django admin. Now, I would like to persist the show/hide fieldsets state when the form is submitted and the page reloaded. According to this question, this can be achieve with a window.localStorage. How should I modify collapse.js to achieve this?

    collapse.js

    Code:
    (function($) {
        $(document).ready(function() {
        // Add anchor tag for Show/Hide link
            $("fieldset.collapse").each(function(i, elem) {
            // Don't hide if fields in this fieldset have errors
                if ($(elem).find("div.errors").length == 0) {
                    $(elem).addClass("collapsed").find("h2").first().append(' (<a id="fieldsetcollapser' +
                        i +'" class="collapse-toggle" href="#">' + gettext("Show") +
                        '</a>)');
                }
            });
            // Add toggle to anchor tag
            $("fieldset.collapse a.collapse-toggle").toggle(
                function() { // Show
                    $(this).text(gettext("Hide")).closest("fieldset").removeClass("collapsed").trigger("show.fieldset", [$(this).attr("id")]);
                    return false;
                },
    
                function() { // Hide
                    $(this).text(gettext("Show")).closest("fieldset").addClass("collapsed").trigger("hide.fieldset", [$(this).attr("id")]);
                    return false;
                }
            );
        });
    })(django.jQuery);

  2. #2
    Join Date
    Feb 2013
    Posts
    46
    what didn't you understand from the stackoverflow answer?

    The point of localstorage in this case is so that when the user leaves ur page (leaving all running JS state behind), the toggled state will still be saved in the user's localstorage (if available in their browser).

    In your hide function, you need to set a piece of data in localstorage that says the state is hidden. In your show function, you need to set a piece of data in localstorage that says the state is showing. Then whenever the view is toggled, localstorage is storing the data. Now, let's change the subject to when the page first loads for any given user.

    - First, you would have to check if the user agent supports localstorage, If not, then just let the app start as it would normally if localstorage never existed. Nothing we can do about that unless u want to use cookies- but that's beyond this post.

    - Second, if the agent supports localstorage, then you need a script that will set the state of all the toggles to that of the ones in localstorage. You need to retrieve data from localstorage, you need to use that data to set the toggles.

    - Third, .. You need to test and make sure the first and second steps work.

  3. #3
    Join Date
    Dec 2012
    Posts
    8
    Ok I have managed to make it works. However, I still have a little bug that I cant fix yet. When the localStorage is true, the fieldset is displayed on reload. That is the expected behaviour. The bug is that the user must click two-times on "Hide" to make the fieldset toggled again. After the double-click, the user have to click only one time on "Hide" or "Show" to toggle the fieldset.

    Do you have any clue about that?

    Code:
    function($) {
    	$(document).ready(function() {
    		// Add anchor tag for Show/Hide link
    		$("fieldset.collapse").each(function(i, elem) {
    			key = 'fieldsetcollapser'+i;
    			if(typeof(window.localStorage) != 'undefined'){ 
    				if(window.localStorage.getItem (key)){
    					$(elem).find("h2").first().append(' (<a id='+ key +' " class="collapse-toggle" href="#">' + gettext("Hide") + '</a>)');
    				}	else {
    					$(elem).addClass("collapsed").find("h2").first().append(' (<a id='+ key +' " class="collapse-toggle" href="#">' + gettext("Show") + '</a>)');
    				}	
    			} 
    			else{ 
    				throw "window.localStorage, not defined"; 
    		}
    
    		});
    		// Add toggle to anchor tag
    		$("fieldset.collapse a.collapse-toggle").toggle(
    			function() { // Show
    				$(this).text(gettext("Hide")).closest("fieldset").removeClass("collapsed").trigger("show.fieldset", [$(this).attr("id")]);
    				window.localStorage.setItem($(this).attr("id"),true)
    			},
    			function() { // Hide
    				$(this).text(gettext("Show")).closest("fieldset").addClass("collapsed").trigger("hide.fieldset", [$(this).attr("id")]);
    				window.localStorage.removeItem($(this).attr("id"))
    				return false;
    			}
    		);
    	});
    })(django.jQuery);
    Last edited by Burton449; 02-27-2013 at 01:54 PM.

  4. #4
    Join Date
    Feb 2013
    Posts
    46
    Can I get you to put this on jsfiddle so I can see it?

  5. #5
    Join Date
    Dec 2012
    Posts
    8
    You can see there:http://jsfiddle.net/sfF99/4/

    It works on jsfiddle now
    Last edited by Burton449; 02-27-2013 at 02:47 PM.

  6. #6
    Join Date
    Dec 2012
    Posts
    8

  7. #7
    Join Date
    Feb 2013
    Posts
    46
    Here, the problem was jQuery toggle doesn't see the localstorage. I created functions for show and hide, and I placed the toggle function in a conditional statement, swapping show and hide if the item is supposed to show from local storage. Also, in the same condition, I invoke 'show' to show the item. I do this rather than constructing the items differently based on local storage. So basically, what I'm doing with this code is simulating a click on "show" when the data is found in local storage.

  8. #8
    Join Date
    Feb 2013
    Posts
    46
    http://jsfiddle.net/aNzrf/1/ .. And can you please teach me how to edit my posts on this forum?

  9. #9
    Join Date
    Dec 2012
    Posts
    8
    Thank you very much! This is a brilliant solution!

    P.S. I think you can edit post only a short time after publishing it...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles