jquery save multiple cookie for every link

Question

I have lots of links in the page, click each one addClass 'voted' to this link. then save the effection into cookies. so that next time refresh web browser, it will save the addClass event.

My code here, but it will only save 1 cookie. I mean if I clicked link 1, link 2. it always remember the last click. refresh the web browser. only link 2 addClass 'voted'. link1 missed addClass event. so how to save multiple cookie for every link? Thanks.

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var cookieName = 'up';
  var cookieOptions = {expires: 7, path: '/'};  

  $("#" + $.cookie(cookieName)).addClass('voted');

  $(".up").live('click',function(e){
    e.preventDefault();    
    $.cookie(cookieName, $(this).attr("id"), cookieOptions);
    // save cookie depends on each link id. 
    $("#" + $.cookie(cookieName)).addClass('voted');
  });
});
</script>

<a href="javascript:void(0)" id="m12345678" class="up">link 1</a>
<a href="javascript:void(0)" id="m12345679" class="up">link 2</a>
<a href="javascript:void(0)" id="m12345680" class="up">link 3</a>

Upload my code in: jsfiddle

which `cookie.js` u r using? please provide the link – xkeshav Oct 01 '11 at 08:15 — xkeshav, Oct 01 '11 at 08:15
@diEcho, `https://github.com/carhartl/jquery-cookie` – Giberno Oct 01 '11 at 08:27 — Giberno, Oct 01 '11 at 08:27

amiry jd · Answer 1 · 2011-10-01T09:03:54.893

1

change the cookie-name may resolve the problem.

var cn = cookieName + $(this).attr("id");
$.cookie(cn, cookieOptions);
// save cookie depends on each link id. 
$("#" + $.cookie(cn)).addClass('voted');

UPDATE: this update added to answer to your updated question:

function checkIfAllClicked(){
    var flag = false;
    $(".up").each(function(){
        var f = $(this).data("isClicked");
        if(f == true){
            flag = true;
        }
        else{
            flag = false;
        }
    });
    if(flag){
        // refresh the page or call any-other function you want
        document.location.href = "any-url";
    }
}

$(".up").live('click',function(e){
    e.preventDefault();    
    $.cookie(cookieName, $(this).attr("id"), cookieOptions);
    // save cookie depends on each link id. 
    $("#" + $.cookie(cookieName)).addClass('voted');
    $(this).data("isClicked", true);
    checkIfAllClicked();
});

edited Oct 01 '11 at 09:03

answered Oct 01 '11 at 08:15

amiry jd

27,021
30
116
215

1

thanks, so how about the `$("#" + $.cookie(cn)).addClass('voted');` out of the `click`? the js variable can not pass out of the `click`. – Giberno Oct 01 '11 at 08:26
I don't understand what you want really, but if you want to save a data for an element, you can use `$(this).data("your-name","your-value")` and in other `function` you can retrieve the saved data by: `var d = $(selector).data("your-name");`. can you explain your purpose more please? – amiry jd Oct 01 '11 at 08:31
1

upload my code in `http://jsfiddle.net/RQP4T/show/`. I just want to remember all the `clicked` behave. if I clicked all the 3 links, then refresh the web browser, it will remember 3 links addClass. if you are good at it, could you re-write a working code for me? Thanks. – Giberno Oct 01 '11 at 08:49
OK. but your (second) issue is not based on Cookies. You have to set a function to monitor links and when they all are clicked, refresh the page. You can use the $(element).data() method. I update the answer, but you should add the above summery, to the question too. – amiry jd Oct 01 '11 at 08:57
1

@Giberno upvote the answer if it is use-full and accept it if resolved your problem, please – amiry jd Oct 01 '11 at 09:06
1

@king.net, `Uncaught ReferenceError: cookieName is not defined` see `http://jsfiddle.net/RQP4T/1/show/` – Giberno Oct 01 '11 at 09:13
1

OM!!! I just put the main code in answer! You should complete it! put this lines: ` var cookieName = 'up'; var cookieOptions = {expires: 7, path: '/'}; ` – amiry jd Oct 01 '11 at 09:16
1

@king.net, still not remember addclass after refresh the web browser. `http://jsfiddle.net/RQP4T/2/`. I am less `15 reputation`, sorry for not `make up` your answer. – Giberno Oct 01 '11 at 09:25

score 0 · Accepted Answer · edited May 23 '17 at 11:47

Solved. refrence here: Jquery - save class state for multiple div #'s to a cookie?

share the answer to the all.

$(document).ready( function() {
    $(function() {
        var cookieName = 'up_';

        $('.up').each(function() {
            var id = $(this).attr('id'), cookie = cookieName + id;

            if ($.cookie(cookie) !== 'ture') {
                $(this).addClass('voted');
            }
        }).live('click', function(e) {
            e.preventDefault();
            $.cookie(cookieName + $(this).attr('id'), true);
        });
    });
});

jquery save multiple cookie for every link

2 Answers2