More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Enviro++
更好教育论坛


Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Share
Options
View
Go to last post Go to first unread
hong  
#1 Posted : Monday, 1 May 2017 4:33:56 PM(UTC)
hong

Rank: Administration

Reputation:

Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 519

Dynamic menus based on user's preference

As we all know, we can control menu access using membership and rules. How about showing different menus dynamically based on user's preference, such as locality?

We can create a set of menu files in html based on the locality list. We use html5 localStorage to save the user's locality selection on the select event of the locality dropdown selection. Unlike sessionStorage with a lifespan of a session, the localStorage persists until user clears browser's cache or changes the selection.

Instead of embedding the menu files as objects, we can load the external files via ajax with jquery. See the code below. First we get the user's selection from localStorage. Based on the selection, the corresponding menu files are loaded via jquery.
cf. HTML - How to include external html page
Code:
<object data="/menuAllStates.html"> 
    Your browser doesn’t support the object tag. 
</object>


Code:
		
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    
    <script type='text/javascript'>
		    var state = "ALL";

		    //js use localStorage instead of sessionStorage
		    if (localStorage != null && localStorage.getItem("region") != null && localStorage.getItem("region") != "")
		        state = localStorage.getItem("region");

		    var e = document.getElementById("selectState");
		    e.value = state;

		    switch (state) {
		        case "ALL":
		            $("#left-panel").load("/menuAllStates.html");
		            break;
		        case "VIC":
		            $("#left-panel").load("/menuVic.html");
		            break;
		        case "NSW":
		            $("#left-panel").load("/menuNsw.html");
		            break;
		        case "QLD":
		            $("#left-panel").load("/menuQld.html");
		            break;
		        case "WA":
		            $("#left-panel").load("/menuWa.html");
		            break;
		        case "SA":
		            $("#left-panel").load("/menuSa.html");
		            break;
		        case "ACT":
		            $("#left-panel").load("/menuAct.html");
		            break;
		        case "TAS":
		            $("#left-panel").load("/menuTas.html");
		            break;
		        case "NT":
		            $("#left-panel").load("/menuNt.html");
		            break;
		        default:
		            $("#left-panel").load("/menuAllStates.html");
		    }
        </script>


        <%--Move your script to the position after the DOM element you're binding the listener to.--%>
        <script type='text/javascript'>
            function SelectStateMenu() {
                var e = document.getElementById("selectState");
                //var state = e.options[e.selectedIndex].value;
                var state = e.value;

                if (typeof (Storage) !== "undefined") {
                    // Code for localStorage/sessionStorage.
                    localStorage.setItem("region", state);
                } else {
                    // Sorry! No Web Storage support..
                }
 
               //if necessary, reload menu tree if branches are invisible. 
               location.reload();
            }
        </script>


Related:

What is the difference between localStorage, sessionStorage, session and cookies?
http://stackoverflow.com...rage-session-and-cookies

Local Storage vs Cookies
http://stackoverflow.com...local-storage-vs-cookies

535 ways to reload a page using javascript
http://www.phpied.com/fi...n/location-location.html

Load data from the server and place the returned HTML into the matched element.
http://api.jquery.com/load/

HTML - How to include external html page
http://stackoverflow.com...clude-external-html-page

Edited by user Monday, 1 May 2017 4:37:16 PM(UTC)  | Reason: Not specified

Sponsor
Rss Feed  Atom Feed
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.