Question

im using jquery cookie to pass value of the element clicked on my first page to be used on the next page. The problem im experiencing is that whenever i set the cookie to null the value doesn’t delete. it still remains.

jquery script on my first page

<script>
$(document).ready(function() {
    $("div.product-header").click(function() {
        var index = $("div.product-header").index(this);
        $.cookie("product_name", index);
        //alert("product category: "+$.cookie("product_name"));
    });
    $("div.product-subheader").click(function() {
        var index = $("div.product-subheader").index(this);
        $.cookie("product_subheader", index);
        //alert("product category item: "+$.cookie("product_subheader"));
    });
});
</script>

second page script which will use the cookie (on this page the cookie is working right)

<script>
$(document).ready(function () {
    $(".product-contents").hide();
    $('div.product-header').eq($.cookie('product_name')).addClass('active').next().show(); 
    $('div.product-subheader').eq($.cookie('product_subheader')).css({fontWeight: 'bold', backgroundColor: '#eeeeee'});             
    $('div.product-header').click(function(){
       $.cookie('product_name',$('div.product-header').index(this));
        if( $(this).next().is(':hidden') ) { 
            $('div.product-header').removeClass('active').next().hide(); 
            $(this).toggleClass('active').next().show();
        }
        return false; 
    });
});
</script>

but when i try to use script on the second page; cookie doesn’t deleted whenever i used the $.cookie(“product_name”, null); and $.cookie(“product_subheader”, null); the cookie still doesn’t deleted

<script>
$(document).ready(function() {
    $("div.product-header").click(function() {
        $.cookie("product_name", null);
        alert("cookie product category should be null not: "+$.cookie("product_name"));

        var index = $("div.product-header").index(this);
        $.cookie("product_name", index);
    });

    $("div.product-subheader").click(function() {
        $.cookie("product_subheader", null);
        alert("cookie product category item should be null not: "+$.cookie("product_subheader"));   

        var index = $("div.product-subheader").index(this);
        $.cookie("product_subheader", index);
    });
});
</script>

any corrections on my code above?

Answer 1

You will have to specify the path when you set the cookie. Use

 $.cookie("product_name", index, { path: '/' });

That should allow you to remove it from pages other than the one that created the cookie.