3

I am using the Bootstrap Alerts boxes, and would like these boxes to "remember" if they have been closed. This way when a user logs in to the members area and closes an alert; the next time they visit the site the alert is still gone.

Is there any way to do this?

<div class="alert-message success" data-alert="alert">
<a class="close" data-dismiss="alert" href="#">&times;</a>When I click &times; I'd like this to never appear again.</div>
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
bradm
  • 295
  • 1
  • 4
  • 13

2 Answers2

4

You probably will have to store that preference in the cookies or on the server itself. A good read can be found in another SO thread.

For storing cookies Basically, what you have to do is to implement javascript around your codes. For simplicity, I utilise jQuery and a jQuery cookie plugin.

// jQuery pulled from Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
// jQuery cookie plugin. You will have to download it on your own: https://github.com/carhartl/jquery-cookie
<script src="/path/to/jquery.cookie.js"></script>
// jQuery action here
<script>
    function runOnLoad(){
        if($.cookie('alert-box') == null) {
            $.cookie('alert-box', 'open', { expires: 7 });
        } else if($.cookie('alert-box') == 'close') {
            $(".close").hide();
        }

        // php psuedo code here (if you are using the server option)
        <?php
            if(check database for hide option == true){
                echo '$(".close").hide();
            }
        ?>
    }
    function hideMe(){
        $.cookie('alert-box', 'close', {expires:7 });
        $(".close").hide();
    }
</script>

<body onload="runOnLoad()">
    <div class="alert-message success" data-alert="alert">
        <a class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()" >&times;</a>When I click &times; I'd like this to never appear again.
    </div>
</body>

If you are using the server option, you have to code hideMe.php to:

  1. set the hide option in a table in your database, i.e. userPreference to true
  2. redirect the user back to the page that he is viewing.

Disclaimer: These codes are to give you an idea how it can be done. However, there is no gaurantee that it will work as it is, as I did not test the code.

Notes:

  1. I utilised jQuery's hide. Read on it.
  2. You can read more about jQuery cookie plugin here.
Community
  • 1
  • 1
Robert Sim
  • 194
  • 3
  • 13
  • I'm really not experienced with Javascript - so I found that thread way too vague for my experience level. Thanks anyway though. – bradm Apr 14 '12 at 15:40
  • I'm very capable when it comes to hacking apart code (almost any language) and I can get by with the basics. I'm coding a site from the ground up using php/mysql, html/css/javascript. I'm not experienced enough to take basics like that and adjust my code though. – bradm Apr 15 '12 at 17:04
  • Hi, I have updated the answer with pseudo codes. Hope it will help you in understanding the two solutions provided in the linked thread. – Robert Sim Apr 16 '12 at 13:32
0

I wrote a basic solution for my website, that works well for my needs:

  • I've used the livequery plugin to wait for the alert elements to exist on the DOM
  • The script is looking for an attribute data-id on the alert div, with an unique value. This will be used later for storing on the cookie or db, and can be optional.
  • I've used the cookies plugin to store the closed alert data id, this unique value can be optional, and dinamically set as an html attribute. Even if the storing method can be improved a lot (like using json for storing multiple alerts inside one cookie as objects), this is just fine for my needs.

The JS to use after the DOM is ready:

//bind to close alerts link
$('.alert a.close').livequery(function()
{
    $(this).bind('click', function()
    {
        var id = $(this).parents('.'+$(this).data('dismiss')).data('id');

        if(id)
        $.cookie('alert-'+id, 'closed', { path: '/' });
    });
});

//hide closed alerts
$('.alert').livequery(function()
{
    var id = $(this).data('id');

    if($.cookie('alert-'+id))
    $(this).hide();
});
Pablo W.
  • 76
  • 2