jQuery Cookie plugin to save select value? - php

Question

I have a series of two chained selects using ajax that work great. I need to be able to store/save the first select in a cookie for future visits but can't quite figure out how/what to do within the existing code?
$(function(){
var questions = $('#questions');
function refreshSelects(){
var selects = questions.find('select');
// Lets not do chosen on the first select
selects.not(":first").chosen({ disable_search_threshold: true });
// Listen for changes
selects.unbind('change').bind('change',function(){
// The selected option
var selected = $(this).find('option').eq(this.selectedIndex);
// Look up the data-connection attribute
var connection = selected.data('connection');
// Removing the li containers that follow (if any)
selected.closest('#questions li').nextAll().remove();
if(connection){
fetchSelect(connection);
}
});
}
var working = false;
function fetchSelect(val){
if(working){
return false;
}
working = true;
$.getJSON('citibank.php',{key:val},function(r){
var connection, options = '';
switch (r.type) {
case 'select':
$.each(r.items,function(k,v){
connection = '';
if(v){
connection = 'data-connection="'+v+'"';
}
options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
});
if(r.defaultText){
// The chose plugin requires that we add an empty option
// element if we want to display a "Please choose" text
options = '<option></option>'+options;
}
// Building the markup for the select section
$('<li>\
<p>'+r.title+'</p>\
<select data-placeholder="'+r.defaultText+'">\
'+ options +'\
</select>\
<span class="divider"></span>\
</li>').appendTo(questions);
refreshSelects();
break;
case 'html':
$(r.html).appendTo(questions);
break;
}
working = false;
});
}
$('#preloader').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
// Initially load the product select
fetchSelect('callTypeSelect');
});

Answer 1

Here is great article on using jCookies.
http://tympanus.net/codrops/2011/09/04/j-is-for-jcookies-http-cookie-handling-for-jquery/
The code for setting it goes like this:
$.jCookies({
name : 'Person',
value : { first: 'John', last: 'Smith', Age: 25 }
});
Getting the cookie goes like this
var person = $.jCookies({ get : 'Person' });

Answer 2

Do you need that value on the server? If you don't I recomment the jStorage plugin. It uses local storage and userData to save information. This has the benefits that the values are not sent to your server on every request, like cookies do.
The usage is very simple:
$.jStorage.set("something", {data: [1,2,3], other: "a string"});
and
$.jStorage.get("something"); // returns {data: [1,2,3], other: "a string"}
In your code it would be something like:
$(function() {
var questions = $('#questions');
var lastSelection = $.jStorage.get("lastSelection");
if(lastSelection) {
questions.find("select:first").val(lastSelection);
}
// more code....
selects.unbind('change').bind('change',function(){
var selected = $(this).find('option').eq(this.selectedIndex);
if(questions.find("select:first")[0] === this) { // Only save if it's the first combo (you could change this to a better way to identify the first select)
$.jStorage.set("lastSelection", selected);
}
// more code....
});