How do I make a Javascript alert display only once, ever?

Question

I'm terrible at Javascript, but unfortunately, I need this one task completed. I need a Javascript alert to only display once--not once per browser session, but only once ever. I'm working on a project for a school competition; the alert will pertain to how Internet Explorer isn't compatible with my site and Chrome or Firefox is recommended. However, I don't want to pester the judges with pop-ups, so it only appearing up once would be best. I found the code that's displayed below online, but I can't make it work correctly. It may be something as simple as a parenthesis missing somewhere--again, I'm not good with Javascript, just HTML and CSS. :P If alternative code is encouraged to carry out my request, then by all means, suggest it! Thanks to all!

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!--[if IE]>    
    <script type="text/javascript">
        $(document).one(function() { alert("You are using Internet Explorer to view this webpage.  Your experience may be subpar while using Internet Explorer; we recommend using an alternative internet browser, such as Chrome or Firefox, to view our website."); } );
    </script>
<![endif]-->

To clarify, you only want the alert to show once even if the judge looks at the site later? Or just once per this page being loaded? — DA., Feb 05 '14 at 01:46

score 10 · Accepted Answer · edited May 23 '17 at 12:08

10

one is NOT what you need as a page refresh will override all the 'memory'.

You are most likely looking for localStorage or, if you are using internet explorer prior to version 8, use cookies:

    <script type="text/javascript">
        var alerted = localStorage.getItem('alerted') || '';
        if (alerted != 'yes') {
         alert("You are using Internet Explorer to view this webpage.  Your experience may be subpar while using Internet Explorer; we recommend using an alternative internet browser, such as Chrome or Firefox, to view our website.");
         localStorage.setItem('alerted','yes');
        }
    </script>

EDIT:

For IE versions prior to 8 you need to use cookies, since there is not suppor for localStorage. It's the exact same concept, just different methods. Take a look at this question for implementing cookies on your page.

After you copied the code from the example, you should have 2 functions - createCookie() and getCookie().

var createCookie = function(name, value, days) {
....
//copy it from the other question
..
}

function getCookie(c_name) {
....
//copy it from the other question
..
}

<!--[if IE]>  
    <script type="text/javascript">
                var alerted = getCookie('alerted') || '';
                if (alerted != 'yes') {
                 alert("You are using Internet Explorer to view this webpage.  Your experience may be subpar while using Internet Explorer; we recommend using an alternative internet browser, such as Chrome or Firefox, to view our website.");
                 createCookie('alerted','yes',365);//cookies expires after 365 days
                }
            </script>
<![endif]-->

Hope this helps!

edited May 23 '17 at 12:08

Community

1
1

answered Feb 05 '14 at 01:42

dev7

6,259
6
32
65

2

I'd suggest cookies rather than localstorage...since we're dealing with IE. – DA. Feb 05 '14 at 01:45
Have to agree with @DA. but it depends a little on the visitors. localStorage is supported all the way back to IE8 so it might be fine in this case. – Nick Coad Feb 05 '14 at 01:46
@DA and @gnack, I updated my answer per your comments...Not really feeling like writing the whole `setCookie()`, `getCookie()` from scratch :) – dev7 Feb 05 '14 at 02:05
You can use a localStorage polyfill (fallback) that would support all browsers: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-storage-localstorage-and-sessionstorage – David d C e Freitas Feb 05 '14 at 02:09
@Yani Sorry, but I still can't put it together (again, amateur at Javascript, but can't find a way around using it for this task). Would you mind setting it up for me with setCookie() and getCookie() implemented? – Ben Feb 05 '14 at 02:51
@Ben modified my answer to implement the cookies. Should be working! – dev7 Feb 05 '14 at 03:06
@Yani Thank you for your time and patience with me, but now the alert appears after every refresh and not just once. – Ben Feb 05 '14 at 03:41
are cookies enabled in your browser? I suggest you learn a bit of how to debug your application using `console.log` and see where it breaks... – dev7 Feb 05 '14 at 03:48

How do I make a Javascript alert display only once, ever?

1 Answers1

Linked