Keep jQuery accordion state on postback with PHP - php

Question

I am using jQuery UI's accordion as a subnav on a site I am building. The problem is that I haven't been able to find a good way to maintain state between pages. I'm wondering what the best way to do this is.
I've thought of storing the index of the accordion in the database, but that seems overly complicated for a problem like this. Is there a better way? Obviously cookies and session but that is equally complicated for just a subnav...any ideas?
EDIT: Here's my code
$.post(
accordion_ajax.ajaxurl,
{
type : 'GET',
action : 'accordion_ajax'
},
function(data){
$(".accordion-main").accordion('option', 'collapsible', true);
$(".accordion-main").accordion('option', 'active', 0);
// the accordion just does not work inside this ajax call, but if I put it outside the ajax call it works fine. Any thoughts?
}
);
$(".accordion-main").accordion({
change: function(event, ui){
$.post(
accordion_ajax.ajaxurl,
{
type : 'SET',
action : 'accordion_ajax',
data : $(".accordion-main").accordion('option', 'active')
}
);
}
});

Answer 1

Here's what I would do:
In the change() handler for the accordion, I would send the index of the current accordion section to the server via an AJAX call:
$( "#AccordionID" ).accordion({
change: function(event, ui) {
$.ajax({
type:'POST',
url: 'urlToPhpScript.php',
data:'function=setAccordion&selectedAccordionSection='+ $("#AccordionID").accordion('option', 'active')
});
}
});
On the server side I would store this value in the users session:
<?php
// urlToPhpScript.php
session_start();
if($_GET['function']=='getAccordion') {
if(isset($_SESSION['currentAccordion'])) {
return $_SESSION['currentAccordion'];
} else {
return 0;
}
}
if($_POST['function']=='setAccordion') {
$_SESSION['currentAccordion'] = $_POST['AccordionID'];
}
Then on each page load I would send an AJAX call to the server that would query the accordion section from the users session:
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'urlToPhpScript.php',
data: 'function=getAccordion',
success: function(data) {
$('#AccordionID').accordion('activate', data);
}
});
});
This way it wouldn't matter how you're navigating from one page to the next, and you wouldn't need to worry about burying a 'currentAccordion' type hidden field on each page of your site.