Rank: Administration
Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor Joined: 23/11/2008(UTC) Posts: 520
|
Dynamic menus based on user's preferenceAs 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-cookiesLocal Storage vs Cookies http://stackoverflow.com...local-storage-vs-cookies535 ways to reload a page using javascript http://www.phpied.com/fi...n/location-location.htmlLoad 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-pageEdited by user Monday, 1 May 2017 4:37:16 PM(UTC)
| Reason: Not specified
|
|
|
|
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.