How to save jQuery toggleClass with cookies?

JavaScript
1

Hi,

I have a problem i have a jQuery snippet when you click it Toggles and adds a class “active”. But the problem is when i do this and refresh the cookie selects everything instead of only the one which i have selected.

$(document).ready(function() {
	function setMyCookie() {
	    myCookieVal = $('.program').hasClass('active') ? 'isActive' : 'notActive';
	    $.cookie('fav_program_cookie', myCookieVal, { path: '/' });    
	}

	if ($.cookie('fav_program_cookie') == 'isActive') {
	    $('.program').addClass('active');    
	} else {
	    $('.program').removeClass('active');
	}
	$(".toggle").click(function () {
      		var fav_program = $(this).closest(".program");
        	fav_program.toggleClass('active');
	    	setMyCookie();
	});
});

This is what happens:

https://s14.postimg.org/hh5r8o6of/Screen_Shot_2016_09_28_at_11_14_50.png

Can somebody please help? i tried using EACH in Jquery with cookies but it is not working. So the cookies do work… but the select everyting instead of only the one which i have selected.

Thanks

2

Hi,

You have to add something to your elements to be able to distinguish them.
From your code I see that each of your elements has the same class .program so when you’re doing this:

$('.program').addClass('active');

you’re actually telling jQuery “find everything with .program class and add .active class to it”.
But you want to point this code to one particular element instead.

First of all, add something (some kind of ID) to each element.
For example, you can use custom data attribute for that:

<div class="program" data-id="1"> ... </div>
<div class="program" data-id="2"> ... </div>
<div class="program" data-id="3"> ... </div>
<!-- and so on -->

Then, when you click the element, get its ID and state:

$(".toggle").click(function () {
    var fav_program = $(this).closest(".program");
    fav_program.toggleClass('active');
    var is_active = fav_program.hasClass('active'); //get the state of current element
    var id = fav_program.data('id'); //get the ID from current element's data-id attribute
    setMyCookie(id, is_active); //pass both to setMyCookie function
});

Next step is to store this data in actual cookie:

function setMyCookie(id, is_active) {
    if (is_active){
        // if element is active, store its ID 
        $.cookie('fav_program_cookie', id);    
    } else {
        // otherwise remove cookie completely
        $.removeCookie('fav_program_cookie');
    }
}

After that you will have a cookie with ID of selected element when page loads.
All you need to do is to find an element with this ID and add your class to it:

// get ID from cookie
var selectedID = $.cookie('fav_program_cookie');
// if cookie is found, highlight the element
if (selectedID) {
    $('.program[data-id=' + selectedID + ']').addClass('active');
}
1 Like
3

Hi sir,

I am already using a data attribute named “data-index” this is my code now:

$(document).ready(function() {
	function setMyCookie(id, is_active) {
	    if (is_active){
	        // if element is active, store its ID 
	        $.cookie('fav_program_cookie', index);    
	    } else {
	        // otherwise remove cookie completely
	        $.removeCookie('fav_program_cookie');
	    }
	}
	// get ID from cookie
	var selectedID = $.cookie('fav_program_cookie');
	// if cookie is found, highlight the element
	if (selectedID) {
	    $('.program[data-index=' + selectedID + ']').addClass('active');
	}

	$(".toggle").click(function () {
	    var fav_program = $(this).closest(".program");
	    fav_program.toggleClass('active');
	    var is_active = fav_program.hasClass('active'); //get the state of current element
	    var id = fav_program.data('index'); //get the ID from current element's data-id attribute
	    setMyCookie(id, is_active); //pass both to setMyCookie function
	});
});

Am i doing something wrong i don’t get any errors but it’s still not working can you please help me out?

Thanks

4

What exactly isn’t working now?
What result do you get?

5

Uncaught ReferenceError: index is not defined on click this is what i get.

My HTML:

<div class="program<?php echo $classes; ?>" data-index="<?php echo $program_index; ?>" style="height: <?php echo $program_height; ?>px; <?php echo $program_style; ?>" data-minutes="<?php echo $program_minutes; ?>" data-minutes-left="<?php echo $program_minutes_left; ?>">
					<div class="inner">
						<div class="program_content">
							<div>
								<div onclick="openModal(<?php echo $program->id?>)">
									<div class="time"><?php echo $program_starttime_clock; ?></div>
									<div class="tip">Tip</div>
									<div class="program_title"><?php echo $program_title; ?></div>
								</div>
                                                    <div class="favourite_program">
                                                        <span class="toggle"></span>
                                                    </div>
							</div>
						</div>
					</div>
				</div>
6

I see now, change index variable name to id inside the setMyCookie function

1 Like
7

Working like a charm sir… thank you very much!!!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.