CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapfunctiontwitter-bootstrap-3
Blueblazer172
Blueblazer172

Reputation: 600

How to run a function only once with jquery?

I have a webpage where only registered users can be.
I use Bootstrap as CSS Framework.
If the user logged in there will be a alert box with a successmessage like this:

<div class="container">
    <div class="alert alert-success" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Success!</strong> You have been signed in successfully!
    </div>
</div>

Now i want to close this after a few seconds. I use this jquery script to do that:

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
     $(this).remove();
  });
}, 1500);

How can I run this code only once, so that if the user accidently refreshed the browser does not see this alert again ?

I've read this post here https://stackoverflow.com/a/23859937/5930557 and know that it can be done with the .one() function from http://api.jquery.com/one/
But i dont know how to include it into my code. Is someone there who can correct it for me and explain, cause jquery and javascript are new to me :P

Upvotes: 2

Views: 4374

Answers (3)

Phil Brockwell
Phil Brockwell

Reputation: 465

.one() will trigger an event once, everytime the page is loaded so wouldn't work for your example.

As another answer has said, you could use cookies, something like this:

// get the cookie if its there
var popUpShown = getCookie('popUpShown');
var numberOfDaysCookieExpiresIn = 99999999999;

// check the cookie to see if the popup has been shown already
if (popUpShown != '1') {
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
    });
  }, 1500);

  // set the cookie so we dont show the pop up again
  setCookie('popUpShown', '1', numberOfDaysCookieExpiresIn);
};

Upvotes: 1

Tom
Tom

Reputation: 2645

A solution would be to use a cookie and set its date to very far in the future.

Note: This fiddle won't allow you to set cookies. 

$(function(){
    var popup = getCookie(popup);
    if(popup){
//Dislay your alert
        $('.container').append(
            ' <div class="alert alert-success" role="alert"> '
            + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
            + '<strong>Success!</strong> You have been signed in successfully! </div>'
        );

    }
});

window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
        //Set the alert cookie to false
        document.cookie = "popup=false; expires=Thu, 18 Dec 2090 12:00:00 UTC";
    });
}, 1500);


//Function to get cookies
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    
</div>

Upvotes: 1

Harun KARATAŞ
Harun KARATAŞ

Reputation: 116

You can use cookies . it is explained here

when page load you can check cookie and if it's empty alert if it s not empty you can do what you wanna do.

Upvotes: 2

Related Questions