Using Bootstrap, have alert box remember close action
I am trying to create a Bootstrap alert box that remembers when users click the close button. I guess I need to store that information in a cookie. Ideally that cookie will only last for that current session, and next they return the box will appear again.
I am using the jQuery-Cookie plugin. I uploaded it to /jquery-cookie-master. Plugin can be found here.
This is what I've got so far by following code found here.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
function runOnLoad(){
if($.cookie('alert-box') == null) {
$.cookie('alert-box', 'open', { expires: 7 });
} else if($.cookie('alert-box') == 'close') {
$(".close").hide();
}
</script>
HTML:
<body onload="runOnLoad()">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
<p>
<strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
</p>
<p>
In an effort to kick-start the forum again we need your help. Sign up now and leave a post (it's free). Once we reach 100 threads every member will receive a special gift.
</p>
<p>
<a href="http://example.com/forum/#/entry/register">
<strong>Sign up to the forum now</strong>
</a>.
</p>
</div>
</body>
Unfortunately it's not working.When I click the close button it does not remember that action and if I refresh the page the alert box will appear again.
What have I done wrong?
Answer
Code issues
In your codes
onloadfunction you seem to be setting the cookie value which is strange since you only want to set the cookie when the user has closed the alert box.Your button has a
hrefattribute. This is not necessary as well as invalid html.
Solution
In order to simply hide and remember the state of the alert box you have to bind an event to the close button so that you know when the user has clicked close.
To bind an event using jQuery you can use the following code:
// When document is ready replaces the need for onload
jQuery(function( $ ){
// Grab your button (based on your posted html)
$('.close').click(function( e ){
// Do not perform default action when button is clicked
e.preventDefault();
/* If you just want the cookie for a session don't provide an expires
Set the path as root, so the cookie will be valid across the whole site */
$.cookie('alert-box', 'closed', { path: '/' });
});
});
To hide the alert box you should simply check for the correct cookie value and hide the box:
jQuery(function( $ ){
// Check if alert has been closed
if( $.cookie('alert-box') === 'closed' ){
$('.alert').hide();
}
// ... Binding code from above example
});