Jquery cookie undefined on the line after setting

Question

Good morning all, I'm just getting familiar with jquery cookie, but I can't seem to find out why the cookie is undefined after setting it.

Basically, I'm trying to store the sort order using sortable in jquery ui in a cookie, but after setting the cookie it's still saying undefined. I'll show the jquery below, and if you guys need to see more (the html and what not, I can update to include that too).

First, just to note, in the update function for sortable, if I put alert(cooked) before I set the cookie,it alerts with item1,item2,item3,item4,item5 as it should, so it's not like something where it's trying to set a cookie with a null value (whether that would cause a problem or not). After setting the cookie, I alert the same cookie I just set and am getting undefined. If anyone has any ideas as to what would be going on, that would be great!

$(document).ready(function() {
    restoreOrder();

    var parentHeight = $(".item").parent(".row").height();
    $(".item").height(parentHeight);

    $(".productsContainer").sortable({
        items: '> .row > .item',
        update: function(event, ui) {
            var cooked = [];
            $(".productsContainer").each(function(index, domEle) { cooked[index] = $(domEle).sortable('toArray'); });
            $.cookie('products', cooked.join('|'));
            alert($.cookie('products'));
        }
    });
    $(".productsContainer").disableSelection();

    $(".item").click(function() {
        $(this).children(".item-box").children("p").toggle();
    });

    $(".close").click(function() {
        var parent = $(this).parent();
        var parentId = parent.attr("id");

        var $old = $(this).siblings(".item-box").children("img");
        var $newImg = $old.clone();
        $newImg.addClass("deletedImage")
        $(".deleteContainer").append($newImg);

        var newOffset = $newImg.offset();
        var oldOffset = $old.offset();

        var $temp = $newImg.clone();
        $("body").append($temp);
        $temp.css('position', 'absolute').css('left', oldOffset.left).css('top', oldOffset.top).css('zIndex', 1000);
        $newImg.hide();
        parent.hide();

        $temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
            $newImg.show();
            $old.remove();
            $temp.remove();
        });
    });
})

function restoreOrder() {
    var cookie = $.cookie('products');
    alert(cookie);
    if (!cookie) return;
    var SavedID = cookie.split('|');
    for ( var u=0, ul=SavedID.length; u < ul; u++ ){ alert(SavedID[u]); SavedID[u] = SavedID[u].split(',');}
    for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) {
        for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < m; Sitem++) {
            $("#sortable").eq(Scolumn).append($("#sortable").children("#" + SavedID[Scolumn][Sitem]));
        }
    }
}

Thanks again so much for any help!

Answer 1

If anyone else is having this same problem, it's a problem with google chrome. I tried this in firefox and IE and the cookies worked fine.

It appears that chrome disables cookies on local files like file:///. A couple solutions I saw were the following:

1) use your local IP 127.0.0.1 or localhost (didn't try this).

2) use the command line argument --enable-file-cookies (