Bootstrap - How to save the state of collapse in a SESSION - php

Question

I use Bootstrap and I would like to save the current state of collapse (open or close) in a session variables PHP (not in a cookie).
Could you give me :
- an example code to save the current state in a session variable PHP.
- and an example code to open or not the collapse (depends on the state stored in the session variable) when the page loads.
Thank you very much

Answer 1

First of all, do you really need to store it into session? Does some PHP script work with that value?
Both cases:
You must store somewhere in JavaScript variable the state of collapsed items:
var collapsed = false; // the default value
$('.collapse').on('hide.bs.collapse', function () {
collapsed = true; // on hide, collapsed is true
})
$('.collapse').on('show.bs.collapse', function () {
collapsed = false; // on show, collapsed is false
})
Yes, i need to store it into session:
At each request, you must add the collapsed variable and pass it for example trhough GET method:
$('a').on('mousedown', function() {
var c = collapsed ? 1 : 0;
var href = $(this).attr('href');
if(href.indexOf('?') !== -1) {
$(this).attr('href', href + '&collapsed=' + c);
else {
$(this).attr('href', href + '?collapsed=' + c);
}
});
And somehow save it to session
$_SESSION['collapsed'] = $_GET['collapsed'];
No, i don't need to store into session:
Most modern browsers now have localStorage variable, which is something like session in JavaScript.
Save into variable (in event handlers for example):
if(typeof(Storage)!=="undefined")
{
window.localStorage.setItem('collapsed', collapsed); // saves with no expiration
code.sessionStorage.setItem('collapsed', collapsed); // saves until browser is closed
}
else
{
// Sorry! No Storage support..
}
Load in some startup script:
if(typeof(Storage)!=="undefined")
{
collapsed = window.localStorage.getItem('collapsed'); // again choose one
collapsed = code.sessionStorage.getItem('collapsed');
if(collapsed) {
$('.collapse').collapse('show');
} else {
$('.collapse').collapse('hide');
}
}
else
{
// Sorry! No Storage support..
}
There may be other solutions, but these are the only i can think about. :)
All codes require jQuery

Answer 2

I would do something like this on the PHP side of things. It allows for storing and retrieving the state of multiple ID:s. Session handling is not included; the functions assume there is an active session going. Also, the functions are static since there is no real need to instantiate a class. And it makes for simpler usage.
class Collapse
{
public static function set_state($id = null, $state = null)
{
if ($id === null || $state === null || !is_numeric($state)) {
return false;
} else {
$state = ($state == 0 ? 0 : 1);
$_SESSION['collapse_state'][$id] = $state;
}
}
public static function state($id = null)
{
if ($id === null) {
return false;
} else {
return $_SESSION['collapse_state'][$id];
}
}
}
// --- Sets the state for chosen ID.
Collapse::set_state('info', 0);
// --- Returns the state of the ID.
Collapse::state('info');
Use this class together with the JavaScript proposed by Tomáš Tomíík Blatný and you'll be able to save your states. I'd probably use POST instead of GET though, to make the URL:s look a bit nicer. This can be done by populating a hidden form field or by sending an AJAX request to a PHP-script that only handles the collapse states.