SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery save multiple cookie for every link

    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.

    I use jquery cookie here: https://github.com/carhartl/jquery-cookie

    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.



    Code:
    <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>

    I upload my code for demo here jsfiddle

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You would need to set unique cookie name identifiers in order for your code to work properly, one way to do this would be to add the unique id from the element as part of the cookie name and run a loop on each page load to set the class for each element. See the below example:

    Code:
    $(function() {
        var cookieName = 'up_';
        
        $('.up').each(function() {
            var id = $(this).attr('id'), cookie = cookieName + id;
            
            if ($.cookie(cookie) !== 'undefined') {
                $(this).addClass('voted');
            }
        }).live('click', function(e) {
            e.preventDefault();
            $.cookie(cookieName + $(this).attr('id'), true);
        });
    });

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi SgtLegend, thanks for your answer, but this will automatic addClass voted when my page first loaded.

    I need user clicked each one, then add class to each one and remember in the cookies.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Have you tested the code?? I ask because i just looked over it and the only way for the voted class to be added is if the cookie value returns as something other then undefined.

    I don't mean to sound blunt but there is just no way for the above code to set the class without the cookie first been set as i have used the jQuery cookie plugin before and if the value is undefined the cookie hasn't been set yet in the browser.

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SgtLegend

    see on:
    http://jsfiddle.net/RQP4T/3/

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry my bad, simply change undefined to null and it will work correctly. Sorry about second guessing you, i have a chest cold which is getting the better if me.

  7. #7
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    both null, undefined or even set empty, all not worked. it will add class when the page loading.
    see: http://jsfiddle.net/RQP4T/4/

    by the way, is it necessary store 3 links cookies with a json data for read or write?

    I am newer for jquery cookie. waiting for your help and search via google for study more.

    Thanks again.

    Giberno

  8. #8
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    solved, also thanks. refrence here: http://stackoverflow.com/questions/2...-s-to-a-cookie

    set:

    if ($.cookie(cookie) !== 'ture') {
    $(this).addClass('voted');
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •