How to Show an Alert After Reloading the Page in JavaScript

How to show an alert after reloading the page in JavaScript?

You can use sessionStorage:

$( "button" ).click( function () {
        sessionStorage.reloadAfterPageLoad = true;
        window.location.reload();
    } 
);

$( function () {
        if ( sessionStorage.reloadAfterPageLoad ) {
            alert( "Hello world" );
            sessionStorage.reloadAfterPageLoad = false;
        }
    } 
);

Showing alert after reloading page

There are a lot of ways to do it. An easy way to achieve this would be passing through a parameter in the URL and checking it on page load.

// Check the URL parameter on page load
$(function(){
    if(getUrlParameter('success') == '1') {
       bootstrap_alert.warning('Message has been sent.');
    }
});

// Set up the click event
$('#sentcontact').on('click', function(){
  if (true){
    var nextUrl = window.location.href;
    nextUrl += (nextUrl.indexOf('?') === -1 ? '?' : '&') + 'success=1'
    window.location = nextUrl;
  }
});

// Simple function to read parameters out of the URL
function getUrlParameter(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

How to alert() when location.reload() if finished

If you reload the page, basically the JavaScript will essentially "reset", so nothing after the reload() call will continue to run. You may need to consider placing a variable in localStorage, and doing your alert on document.ready.

Here would be an example. Let's say that you want to refresh the page after the user clicked a particular button.

$(".myButton").on("click", function(){
     localStorage.setItem("buttonClicked", true); 
     location.reload(); 
}); 

$(document).ready(function(){
// This function will run on every page reload, but the alert will only 
// happen on if the buttonClicked variable in localStorage == true
    if(localStorage.getItem("buttonClicked");               
        alert("you clicked the button!") 
    }
}); 

How to show message or alert after page reload?

You have to do like this

$(document).ready(function(){
    //get it if Status key found
    if(localStorage.getItem("Status"))
    {
        Toaster.show("The record is added");
        localStorage.clear();
    }
});

on ajax call set local storage

success: function(data) {
if (data.OperationStatus) {
    localStorage.setItem("Status",data.OperationStatus)
    window.location.reload(); 
}

You can also do it with sessionStorage. Replace localStorage with sessionStorage in current code and whole code works with sessionStorage.

On localStorage works like cookies get data until you use
localStorage.removeItem(key); or localStorage.clear();

On sessionStorage it remains till you close browser tab or sessionStorage.removeItem(key); or sessionStorage.clear();.

Check Reference for localStorage and sessionStorage use.

Show alert after reloading page

You can do something like this

        success: function(data) {
          window.sessionStorage.setItem("successData" , JSON.stringify(data));
          window.location.reload();            
       }

$(document).ready(function(){
    if(window.sessionStorage.getItem("successData")){
      $('#alert_message').html('<div class="alert-success">' + JSON.parse(window.sessionStorage.getItem("successData")) + '</div>');             
}
})

Make sure to clear the session storage before the ajax call. And you can store only string values in the local or session storage so you have to stringify the json object to store it in session storage , and then if you want to use it , you have to parse that.

Reload page after notify shows completely done

Just move your location.reload() from inside of setTimeout to an option of toastr, named 'onHidden'.

function toastr_option() {
    toastr.options = {
        "newestOnTop": true, "progressBar": false, "positionClass": "toast-top-right", "preventDuplicates": true, "showDuration": 300, "hideDuration": 1000, "timeOut": 5000, "extendedTimeOut": 1000, "showEasing": "swing", "hideEasing": "linear", "showMethod": "slideDown", "hideMethod": "slideUp", onHidden: function(){. location.reload(); }
    }
}

Alert not displaying after page refresh/reload (Angular v10)

Reloading the page re-initialises the application which means that your showAlertMessage = false; is being executed again once the component loads.

A simple way to get the behaviour you want is to use url params. On button click you modify the path you're on to include something like ?showAlertMessage=true so that on 2nd load the initial state differs. (example)

Alternative options to it are as Andre mentioned, using the localstorage or some other method of persisting state outside of the app scope.

You might also want to consider if reloading is the right solution here since re-initialising the whole application takes time and goes a bit against the whole idea of a SPA.

How to give notification after location.reload();

The page does not know if a location.reload() was called.

You can set the value in a cookie, localstorage, or pass the value in the URL before calling location.reload(). Then check if it exists every time the page is loaded.

---

Related Topics