Add new value to cookie dynamically

Question

Im trying to add new value to a cookie, depending on which option you have choosed in an drop down menu. When you choose a option, the value of that option should be inserted into the cookie. When you choose another option, the new value of the option should be added to the cookie, and the old one should be replaced.

I've tried this:

    var value;
    var id;
    var service_info;
    var service;    
    var connection; //Namnet på de tjänster som finns, nao_lan, stadsnat, tele osv English: The values of the options
    $.cookie("cookie_connection", connection);  //Creates cookie

$('.type_of_connection').change(function(e) { //Visa vald tjänst och dess tillhörande div. Varje tjänst har en egen div.

    var show_connection = 1;    
    connection = $(this).val(); //Innehåller VILKEN tjänst man har valt ENGLIS: The option you choosed
    $.cookie("cookie_connection", connection);
    var divbox = null;  //Innehåller id:et på den div som skall visas.
    if(connection == "nao_lan") {
        divbox = "services_naolan";
    } else if(connection == "stadsnat") {
        divbox = "services_stadsnat";
    } else if(connection == "vadsl") {
        divbox = "services_vadsl";
    } else if(connection == "tele") {
        divbox = "services_tele";
    } else {
        divbox = null;
    }
    $.ajax({
            type: 'GET',
            url: 'summary.php',
            data: {connection: connection, show_connection: show_connection},
            dataType: "html",
            success: function(data) { $("#table_right #" + divbox).html(data).show(); },
            error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
    }); 
});


$('#'+$.cookie('cookie_connection')+' :input').blur(function(e) {
    alert($.cookie('cookie_connection'));
    if(!$(e.currentTarget).val() == "") {
        service_info = $(e.currentTarget).val(); //Innehåller värdet i input-fälten
        id = $(e.currentTarget).attr('id');
        service = $.cookie('cookie_connection');
        $.ajax({
            type: 'GET',
            url: 'summary.php',
            data: {service_info: service_info, id: id, service: service},
            dataType: "html",
            success: function(data) { $('#table_right #services_'+$.cookie('cookie_connection')).html(data); },
            error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }  
        });     
    }
});

AS you can see, im trying to add a new value to the cookie in the first function. Im going to use this cookie value later in the function below to generate the div that belongs to the cookie value. Anyone who can help me?

Answer 1

I think you must bind the blur event inside the change event, otherwise it would never work - i.e. you have to unbind the old blur event, and create a new one, because your connection thingie changed. I think the following code might help:

function bindConnection( prevConnId, currConnId ) {
    if( prevConnId ) {
        $('#'+prevConnId+' :input').off( "blur ");
    }

    $('#'+currConnId+' :input').on( "blur", function(e) {
        alert( currConnId );
        if(!$(e.currentTarget).val() == "") {
            service_info = $(e.currentTarget).val(); //Innehåller värdet i input-fälten
            id = $(e.currentTarget).attr('id');
            service = currConnId;
            $.ajax({
                type: 'GET',
                url: 'summary.php',
                data: {service_info: service_info, id: id, service: service},
                dataType: "html",
                success: function(data) { $('#table_right #services_'+currConnId).html(data); },
                error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }  
            });     
        }
    });
}

$('.type_of_connection').change(function(e) { //Visa vald tjänst och dess tillhörande div. Varje tjänst har en egen div.

    var show_connection = 1;    

    connection = $(this).val(); //Innehåller VILKEN tjänst man har valt ENGLIS: The option you choosed

    bindConnection( $.cookie("cookie_connection"), connection ); //unbind event for previous connection, and bind new one

    $.cookie("cookie_connection", connection);

    var divbox = null;  //Innehåller id:et på den div som skall visas.
    if(connection == "nao_lan") {
        divbox = "services_naolan";
    } else if(connection == "stadsnat") {
        divbox = "services_stadsnat";
    } else if(connection == "vadsl") {
        divbox = "services_vadsl";
    } else if(connection == "tele") {
        divbox = "services_tele";
    } else {
        divbox = null;
    }
    $.ajax({
            type: 'GET',
            url: 'summary.php',
            data: {connection: connection, show_connection: show_connection},
            dataType: "html",
            success: function(data) { $("#table_right #" + divbox).html(data).show(); },
            error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
    }); 
});

bindConnection( null,  $.cookie('cookie_connection') ); //bind the first connection

Answer 2

I have always used these 2 functions for setting and getting cookies:

function setCookie(c_name,value,exdays,c_domain) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value + "; path=/; domain=."+c_domain;
} 
function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
      c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
      c_value = "";
    } else {
      c_start = c_value.indexOf("=", c_start) + 1;
      var c_end = c_value.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = c_value.length;
      }
      c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

Example:

setCookie("coolcookie","SOME VALUE",7,"stackoverflow.com");
var mycookie = getCookie("coolcookie");