2

Ich habe eine Webseite, wo nur registrierte Benutzer sein können.
Ich benutze Bootstrap als CSS Framework.
Wenn der Benutzer angemeldet wird es eine Warnung mit einem successmessage so aussehen:Wie führe ich eine Funktion nur einmal mit jquery aus?

<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> 

Jetzt möchte ich das nach ein paar Sekunden schließen. Ich benutze dieses jquery Skript zu tun, dass:

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

Wie kann ich diesen Code nur einmal ausgeführt, so dass, wenn der Benutzer versehentlich den Browser aktualisiert nicht diese Warnung wieder sehen?

Ich habe diesen Beitrag hier https://stackoverflow.com/a/23859937/5930557 lesen und wissen, dass sie mit der .one() Funktion von http://api.jquery.com/one/
getan werden kann, aber ich weiß nicht, wie es in meinem Code aufzunehmen. Ist jemand da, der es für mich korrigieren kann und erklären kann, weil jquery und Javascript neu für mich sind: P

+0

Mit einem aufgefrischt Browser die eine() Funktion wird nicht helfen, Sie könnten versuchen, eine Variable in localstorage Einstellung, mit einer Art Sitzungs-ID, gegen die Sie nachsehen. – JohannesB

+0

Wenn der Benutzer die Seite aktualisiert, wird das Skript neu geladen, so dass one() nicht funktioniert. Ich würde dafür einen Cookie oder eine Sitzung verwenden. Wenn die Sitzung oder das Cookie vorhanden ist, werde ich das Skript nicht ausführen, sonst wird es ausgeführt. – Pierre

+0

Cookies oder localStorage, oder rufen Sie einfach die Funktion auf, die den Alarm bei der Anmeldeerfolgsfunktion anzeigt. – Brian

Antwort

1

.one() ein Ereignis einmal auslösen, jedes Mal wird die Seite geladen würde für Ihr Beispiel so nicht funktionieren.

Als eine andere Antwort hat gesagt, Sie Cookies verwenden könnte, so etwas wie dieses:

// 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); 
}; 
2

Sie können Cookies verwenden. es ist erklärt here

wenn seiten laden können sie cookie überprüfen und wenn es leer warnung wenn es nicht leer ist können sie tun was sie wollen.

1

Eine Lösung wäre, einen Cookie zu verwenden und sein Datum in der Zukunft sehr weit festzulegen.

Hinweis: Mit dieser Geige können Sie keine Cookies setzen.

$(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>

Verwandte Themen