Jquery change class with cookie issue

Question

First sorry im a bit of a beginner in jquery.

My problem is that im trying to make a class switcher with jquery cookie.

It works fine only one problem. When i select the jobs on the main page every job has an unique id, and has a button next to it, when the user clicks on it it saves it to the favorites clicks again removes it. If its saved the button cganges to yellow, if removed changes to blue.

I was able to keep the class after page refresh, but my problem is what i really cant solve is, if i have more jobs listed click on it keeps the class, and i add a nother it removes the class from the other and adds it whats clicked, so it not keeping it on multiple only one.

Could please someone give me a hint?

My code:

html

<a href="#" id="<?php echo $res->info_id; ?>" class="favorite btn btn-primary btn-mini" title="Add to favorite">
  <i class="icon-star icon-white"></i>
</a>

jQuery

(function () {

//save to favorites
$('.favorite').on('click', function(e){
    e.preventDefault();
    var data = [],
    newclass = 'btn-warning',
    oldcalss = 'btn-primary',
    fav = $(this);
    favId = fav.attr('id'),

    $.ajax({
      type: "POST",
      url: base_url + 'ajax/add_favorite/' + favId,
      data: favId,
      dataType: "json",
      success: function(data) { 
        if(data.status == "removed"){
          $.cookie('keepClass', 'btn-primary');
          $.cookie('jId', favId);
          fav.removeClass(newclass)
          .addClass($.cookie('keepClass'))
          .attr("title", "Add to favorites");
        } else {
          $.cookie('keepClass', 'btn-warning');
          $.cookie('jId', favId);
          fav.removeClass(oldcalss)
          .addClass($.cookie('keepClass'))
          .attr("title", "Remove from favorites");;
        }
      }
    });
});

$('#' + $.cookie('jId')).attr('class', "btn btn-mini " + $.cookie('keepClass'));

})(jQuery);

thank you

Looks like you're overwriting `$.cookie('jId')` each time - I'd suggest storing them as a comma-separated list in that cookie. — ClarkeyBoy, Jul 06 '12 at 06:41
I think what @ClarkeyBoy wants to say is : Instead of storing just one Id in the cookie, store multiple Ids. So, your actions could be : i) If 'id1' is clicked, check if it is in the cookie (value is a list), if yes - do nothing, otherwise add 'id1' to the list of values in the cookie jId. Your cookie values would look something like 'id1, id5, id8' after the user selects the buttons with id1, id5 and id8. When the user presses the button id8 again (to deselect), the new cookie values should be id1, id5 [id8 should be selectively removed] — TJ-, Jul 06 '12 at 06:58

score 1 · Answer 1 · edited May 23 '17 at 11:56

You need to store a list favourite jobs persistently using cookies. For storing a list of items we use arrays in javascript, but unfortunately you can save only strings in a cookie.

A similar problem of storing a list of values in cookie has already been asked and answered see here how to store an array in jquery cookie?

Implement that, create a list called 'favList',

var list = new cookieList("favList");

Now you should 'add / remove' the ID of the job to the 'favList' to make it 'fav'.

list.add(favId);
list.remove(favId);

When page loads, retrieve the list iterate through them and mark all fav items with your class, if you want to mark all items not in list add your logic.

$(document).ready(function(){
  var list = new cookieList("favList"); //no need to create this again for click logic
  $.each(list.items() , function(index, value){
    $('#' + value).addClass('iAmAFavItem');
    });

});

score 0 · Accepted Answer · answered Jul 09 '12 at 13:24

First thank you all for the replyes, i gave all of you an upvote, but i sat down today and managed to do it with my logic.

var cookieName = 'fav_';
$('.favorite').each(function(){
    var id = $(this).attr('id'), cookie = cookieName + id;
    if($.cookie(cookie) !== 'save' ){
        $(this).addClass('btn-primary');
    } else if($.cookie(cookie) !== 'remove') {
        $(this).addClass('btn-warning');
    }

}).on('click', function(e){
    e.preventDefault();
    var fav = $(this);
    var id = fav.attr('id');

    $.ajax({
        type: "POST",
        url: base_url + 'ajax/add_favorite/' + id,
        data: id,
        dataType: "json",
        success: function(data)
        {   
            if(data.status == "removed")
            {
                $.cookie(cookieName + $(fav).attr('id'), 'remove');
                $(fav).removeClass('btn-warning').addClass('btn-primary');
            } else {
                $.cookie(cookieName + $(fav).attr('id'), 'save');
                $(fav).removeClass('btn-primary').addClass('btn-warning');
            }
        }

    });

});

thank you for all again

Jquery change class with cookie issue

2 Answers2