jQuery cookie

JavaScript
1

I have a multiple alerts on a website that I’d like if the users closes any of them, let it stay closed in all the site’s pages until the browser is closed. However, it doesn’t stay closed. closed alerts still show up on subsequent pages. My code looks like below.

// Alert session cookie starts here 
    function closeAlert(){          
        var closeAlert = $j('.alert-box').hide();
    // - Notice how we pass a function and get an integer
        $j.cookie('Current Alert is closed', true, {path: '/'});
        
    }
     console.log('Current Alert is closed.');
    // - Simply checks the alert box above
    if($j.cookie('alert-closed')){
        console.log('Closing the alert box automatically...');
        closeAlert();
        
    }
    
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
  }
2

You have different cookie names when you set and get your cookie:

$j.cookie('Current Alert is closed' ... )
$j.cookie('alert-closed')

Use same name in both calls (alert-closed)

3

I corrected that and it closes just one alert. It looks like below.

// Alert session cookie starts here 
    function closeAlert(){          
        var closeAlert = $j('.alert-box:visible').remove();
    // - Notice how we pass a function and get an integer
        $j.cookie('Alert-is-closed', true, {path: '/'});
        
    }
     console.log('Alert-is-closed');
    // - Simply checks the alert box above
    if($j.cookie('Alert-is-closed')){
        console.log('Closing the alert box automatically.');
        closeAlert();
        
    }
    
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
        
    });

While the whole code that deals with the alert looks like below

 var $j = jQuery.noConflict(); 

 $j(document).ready(function () {

 $j(".alert-box:first").show();




// Aler Count Code starts here //
var n = $j( ".alert-box" ).length;
 $j( ".alert-count" ).text( "" + n + " Alerts");




// ALert Box Navigator condition code Starts here 


    $j('.alert-box').length < 2 && $('.alert-right-arrow .fa, .alert-left-arrow .fa, .alert-count').css({
        display: 'none'
    });
  

// Alert session cookie starts here 
    function closeAlert(){          
        var closeAlert = $j('.alert-box:visible').remove();
    // - Notice how we pass a function and get an integer
        $j.cookie('Alert-is-closed', true, {path: '/'});
        
    }
     console.log('Alert-is-closed');
    // - Simply checks the alert box above
    if($j.cookie('Alert-is-closed')){
        console.log('Closing the alert box automatically.');
        closeAlert();
        
    }
    
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
        
    });




   // Alert Box Navigator clicks code loop starts here

    $j(".alert-box").each(function(e) {
        if (e !== 0)
            $j(this).hide();
    });
           $j(".alert-right-arrow, .alert-count").click(function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
        return false;
    });

    $j(".alert-left-arrow").click(function(){
        if ($j(".alert-box:visible").prev().length != 0)
            $j(".alert-box").next().show().prev().hide();
        else {
             $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();        }
        return false;
    });
    
    
    
    
    // Alert automator code starts here      
    // The reusable timer callback
    var timer = function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
 
    }
    // The timer ID
    var timerID = null

    // Run on load if this thing is set
    if ($j('.alert-box').length > 1) {
        timerID =  setInterval(timer, 6000);
    }

    // Toggle the timer
    $j('.alert-box').hover(function (ev) {
        clearInterval(timerID);
    // - Notice how we pass a function and get an integer
    },function (ev) {
        timerID = setInterval(timer, 6000);
    });


// Alert Box  switch code starts here
$j('.alert-switch').click(function(event) { // do not use #next because there can only be one #next
        event.preventDefault();         // cancel click through
        // get current list item
        var currAlert = $j('.alert-box:visible');
        // get next list item
        var nextAlert = currAlert.next();
        // if nextli length is 0, make it equal to first li
        if (nextAlert.length == 0) {
            nextAlert = currAlert.siblings(':first');
        }
        currAlert.remove();
        nextAlert.show();
});

    
    
    
    // Alert Box Colornizer code starts here //

    $j('.alert-box:contains("[red]")').addClass('red');
    $j('.alert-box:contains("[blue]")').addClass('blue');
    $j('.alert-box:contains("[yellow]")').addClass('yellow');
    
    
   
        
    jg('.alert-content').html(function(){    
        // separate the text by spaces
        var text= jg(this).text().split(' ');
        // drop the last word and store it in a variable
        var last = text.pop();
        // join the text back and if it has more than 1 word add the span tag
        // to the last word
        return text.join(" ") + (text.length > 0 ? ' <span class="last">'+last+'</span>' :last);   
    });
 

});
4

That means each alert-box should have some kind of unique ID so we can distinguish them
Let’s use custom data-id="ID' attribute for that.

After this line:

$j(".alert-box").each(function(e) {

add:

$j(this).data('id', e);

This will attach data-id attribute holding ID number for each of your alerts.

Then modify closeAlert() function like so:

function closeAlert(){          
    var alert = $j('.alert-box:visible');
    var alertId = alert.data('id');
    alert.remove();
    $j.cookie('Alert-is-closed-'+alertId, true, {path: '/'});
    //cookie name will be different for each alert:
    // Alert-is-closed-0
    // Alert-is-closed-1
    // Alert-is-closed-2
    // ...and so on...
}

And finally modify the part of code where you check if current alert should be closed:

    if($j.cookie('Alert-is-closed-' + $j('.alert-box:visible').data('id'))){
        console.log('Closing the alert box automatically.');
        closeAlert();
    }

I’m not sure this will work immediately but I hope you’ve got the idea

5

I have all together as shown below and it doesn’t show up again.

// Alert session cookie starts here 
    $j(".alert-box").each(function(e) {
    $j(this).data('id', e);      
        var closeAlert = $j('.alert-box:visible').remove()
    // - Notice how we pass a function and get an integer
        $j.cookie('Alert-is-closed', true, {path: '/'})
        
    }
     console.log('Alert-is-closed');
    // - Simply checks the alert box above
    if($j.cookie('Alert-is-closed-' + $j('.alert-box:visible').data('id'))){
        console.log('Closing the alert box automatically.');
        closeAlert();
    }
        
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
        
    });
    });
6

I think you should follow my instructions more carefully

You shouldn’t copy and paste that line, you already have it (see your post #3)

Also you’ve broken closeAlert() function

7

My appologies, I have corrected it. Everything looks like below and the alerts still doesn’t show up

 var $j = jQuery.noConflict(); 

 $j(document).ready(function () {

 $j(".alert-box:first").show();




// Aler Count Code starts here //
var n = $j( ".alert-box" ).length;
 $j( ".alert-count" ).text( "" + n + " Alerts");




// ALert Box Navigator condition code Starts here 


    $j('.alert-box').length < 2 && $('.alert-right-arrow .fa, .alert-left-arrow .fa, .alert-count').css({
        display: 'none'
    });
  

// Alert session cookie starts here 
    function closeAlert(){          
    var alert = $j('.alert-box:visible');
    var alertId = alert.data('id');
    alert.remove();
    $j.cookie('Alert-is-closed-'+alertId, true, {path: '/'});
    

     console.log('Alert-is-closed');
    // - Simply checks the alert box above
    if($j.cookie('Alert-is-closed-' + $j('.alert-box:visible').data('id'))){
        console.log('Closing the alert box automatically.');
        closeAlert();
    }
    
    
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
        
    });
    
    
    
    




   // Alert Box Navigator clicks code loop starts here

    $j(".alert-box").each(function(e) {
    $j(this).data('id', e);
        if (e !== 0)
            $j(this).hide();
    });
           $j(".alert-right-arrow, .alert-count").click(function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
        return false;
    });

    $j(".alert-left-arrow").click(function(){
        if ($j(".alert-box:visible").prev().length != 0)
            $j(".alert-box").next().show().prev().hide();
        else {
             $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();        }
        return false;
    });
    
    
    
    
    // Alert automator code starts here      
    // The reusable timer callback
    var timer = function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
 
    }
    // The timer ID
    var timerID = null

    // Run on load if this thing is set
    if ($j('.alert-box').length > 1) {
        timerID =  setInterval(timer, 6000);
    }

    // Toggle the timer
    $j('.alert-box').hover(function (ev) {
        clearInterval(timerID);
    // - Notice how we pass a function and get an integer
    },function (ev) {
        timerID = setInterval(timer, 6000);
    });


// Alert Box  switch code starts here
$j('.alert-switch').click(function(event) { // do not use #next because there can only be one #next
        event.preventDefault();         // cancel click through
        // get current list item
        var currAlert = $j('.alert-box:visible');
        // get next list item
        var nextAlert = currAlert.next();
        // if nextli length is 0, make it equal to first li
        if (nextAlert.length == 0) {
            nextAlert = currAlert.siblings(':first');
        }
        currAlert.remove();
        nextAlert.show();
});

    
    
    
    // Alert Box Colornizer code starts here //

    $j('.alert-box:contains("[red]")').addClass('red');
    $j('.alert-box:contains("[blue]")').addClass('blue');
    $j('.alert-box:contains("[yellow]")').addClass('yellow');
    
    
   
        
    jg('.alert-content').html(function(){    
        // separate the text by spaces
        var text= jg(this).text().split(' ');
        // drop the last word and store it in a variable
        var last = text.pop();
        // join the text back and if it has more than 1 word add the span tag
        // to the last word
        return text.join(" ") + (text.length > 0 ? ' <span class="last">'+last+'</span>' :last);   
    });
 

});
8

closeAlert() function is still broken
It misses closing }

9

To be sincere MegaZoid I’m still learning. please help me out. I can’t seem to figure it out please help me

10

add } after

console.log('Alert-is-closed');
11

I will let you how it goes.

12

Fixed the error but it doesn’t hide any of the alerts anymore. It hides and shows up again. I debugged it and it doesn’t seem to be adding the ID’s.

13

Do you have any link where I can see all of this live to debug?

14

It is not published,

15

It’s near to impossible to guess where the problem is without having complete code to see…

16

For us to help you further with this, we will need to see all of the JavaScript code that is related to these cookies and alerts.

17

I will post it in a bit

18

@Paul_Wilkins see code for the alert below. Thanks a million

 var $j = jQuery.noConflict(); 

 $j(document).ready(function () {

 $j(".alert-box:first").show();




// Aler Count Code starts here //
var n = $j( ".alert-box" ).length;
 $j( ".alert-count" ).text( "" + n + " Alerts");




// ALert Box Navigator condition code Starts here 


    $j('.alert-box').length < 2 && $('.alert-right-arrow .fa, .alert-left-arrow .fa, .alert-count').css({
        display: 'none'
    });
  

function closeAlert(){          
    var alert = $j('.alert-box:visible');
    var alertId = alert.data('id');
    alert.remove();
    $j.cookie('Alert-is-closed-'+alertId, true, {path: '/'});
    //cookie name will be different for each alert:
    // Alert-is-closed-0
    // Alert-is-closed-1
    // Alert-is-closed-2
    // ...and so on...
}


     console.log('Alert-is-closed');
    // - Simply checks the alert box above
     if($j.cookie('Alert-is-closed-' + $j('.alert-box:visible').data('id'))){
        console.log('Closing the alert box automatically.');
        closeAlert();
    }    
        // Close the box on click
    $j('.alert-switch').click(function () {
           
           closeAlert();
        
    });




   // Alert Box Navigator clicks code loop starts here

    $j(".alert-box").each(function(e) {
   $j(this).data('id', e);
    
 $j(".alert-box:first").show();
        if (e !== 0)
            $j(this).hide();
    });
           $j(".alert-right-arrow, .alert-count").click(function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
        return false;
    });

    $j(".alert-left-arrow").click(function(){
        if ($j(".alert-box:visible").prev().length != 0)
            $j(".alert-box").next().show().prev().hide();
        else {
             $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();        }
        return false;
    });
    
    
    
    
    // Alert automator code starts here      
    // The reusable timer callback
    var timer = function(){
        if ($j(".alert-box:visible").next().length !== 0)
            $j(".alert-box:visible").next().show().prev().hide();
        else {
            $j(".alert-box:visible").hide();
            $j(".alert-box:first").show();
        }
 
    }
    // The timer ID
    var timerID = null

    // Run on load if this thing is set
    if ($j('.alert-box').length > 1) {
        timerID =  setInterval(timer, 6000);
    }

    // Toggle the timer
    $j('.alert-box').hover(function (ev) {
        clearInterval(timerID);
    // - Notice how we pass a function and get an integer
    },function (ev) {
        timerID = setInterval(timer, 6000);
    });


// Alert Box  switch code starts here
$j('.alert-switch').click(function(event) { // do not use #next because there can only be one #next
        event.preventDefault();         // cancel click through
        // get current list item
        var currAlert = $j('.alert-box:visible');
        // get next list item
        var nextAlert = currAlert.next();
        // if nextli length is 0, make it equal to first li
        if (nextAlert.length == 0) {
            nextAlert = currAlert.siblings(':first');
        }
        currAlert.remove();
        nextAlert.show();
});

    
    
    
    // Alert Box Colornizer code starts here //

    $j('.alert-box:contains("[red]")').addClass('red');
    $j('.alert-box:contains("[blue]")').addClass('blue');
    $j('.alert-box:contains("[yellow]")').addClass('yellow');
    
    
   
        
    jg('.alert-content').html(function(){    
        // separate the text by spaces
        var text= jg(this).text().split(' ');
        // drop the last word and store it in a variable
        var last = text.pop();
        // join the text back and if it has more than 1 word add the span tag
        // to the last word
        return text.join(" ") + (text.length > 0 ? ' <span class="last">'+last+'</span>' :last);   
    });
 




});
19

As you are currently using the non-standard $j to refer to jQuery, I see that you’ve missed it out in the alert box navigator section, and near the end you’ve used jg instead of $j

Also, what is this piece of code supposed to do? It’s puzzling trying to figure out what you were wanting to achieve with it.

$j('.alert-box').length < 2 && $j('.alert-right-arrow .fa, .alert-left-arrow .fa, .alert-count').css({
        display: 'none'
});

Is it anything like the following? Or is there more that the above was supposed to achieve?

if ($j('.alert-box').length < 2) {
    $j('.alert-right-arrow .fa, .alert-left-arrow .fa, .alert-count').css({
        display: 'none'
    });
}

Am I right to believe that you are using $j due to $ conflicting with other libraries that you use? If so, there’s a good and standard workaround to that particular issue, where you use as a function argument to the document ready wrapper.

jQuery.noConflict();
jQuery(document).ready(function ($) {
    ...
});

Outside of that function $ can mean anything. Inside of the document ready function the $ symbol is just for jQuery.

See if there’s any improvement after making those fixes.

20

Yes you are right