Issue
I have jsp page where i have panel group with collapsible list. When i call servlet function, it will render to the same page with data. But the collapsible menu gets refreshed. How to maintain the previous state?
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#collapse2"><li class="list-group-item" style="background-color: #394263;color: white">A</li></a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "A" ><li class="list-group-item" style="background-color: #394263;color: white">B</li></a>
<a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "B"><li class="list-group-item" style="background-color: #394263;color: white">C</li></a>
<a href="TestServlet?environment=<%=env%>&date=<%=date%>&test=AB" id="security"><li class="list-group-item" style="background-color: #394263;color: white">D</li></a>
</ul>
</div>
</div>
</div>
Solution
You can set value in localStorage whenever you click on any <a> and then store the value of href in localStorage and then always call the function onload of your page to open only those panel which was clicked by user.
So, here is javascript code :
//onload of your page this will get called
function check_storage() {
//check if there is any value in localStorage
if (localStorage.getItem("save") != null) {
//get that value
var value= localStorage.getItem("save");
console.log(value);
show(value); //call function
}
}
//onclick of <a> this will get called
function save(el) {
//store the href to some variable
var save = el.getAttribute("href");
console.log(save);
localStorage.clear();//clear previous data
localStorage.setItem("save", save);//add data to storage
}
function show(date_value) {
console.log("in")
$(date_value).toggle();//to show panel
}
Your html will look like below :
//add onload event
<body onload="check_storage()">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"> //add onclick
<a data-toggle="collapse" onclick="save(this)" href="#collapse2">
<li class="list-group-item" style="background-color: #394263;color: white">A</li>
</a>
</h5>
</div>
...
</div>
</body>
Answered By - Swati
Answer Checked By - Cary Denson (JavaFixing Admin)
