browser history for Selectable (jQuery UI)

Question

How can I keep open seletable item when I go to the other pages? When I come back I want it is already open last one, whether when I reload page or come throught "previous page" (browser history). ui-state-active is set to item which is currently open.

Answer 1

This may be a pain but you will need to use cookies. You will need to load the value from the cookies on page load and save the cookie each time your control changes some value. I think the jQueryUI tabs have this build in using jquery.cookie.js .

Answer 2

Instead of using cookies, you may also consider using the location.hash to store that information.

When the user returns to the page through the browser history, the hash will still be set and can retrieved to do with as you please.

A basic example using the hash to select an option in a select element based on the hash value:

<script>
$(function() {
    // read the hash and strip the '#' if found
    var hashValue = (location.hash != "") ? location.hash.substr(1) : null;

    // select the option with value = hashvalue
    if(hashValue)   {
        $("#selectElement").val(hashValue);
    }

    // when the user selects an option, store the option value in the location.hash
    $("#selectElement").change(function() {
        location.hash = $(this).val();
    });
});
</script>

<select id="selectElement">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>