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

Question

I am trying to make alert box after page reloaded, but it doesn't work.
Please correct my code and tell me why?

$("button").click(function(){
    window.location.reload();
    alert("Hello world");
});

Consider that when you're page is reloaded, it's not going to automatically remember the state of the previous page. When your page reloads all it's going to do is bind a click event and do nothing until someone clicks your button. — Ralph Caraveo, Aug 01 '13 at 05:59
When you reload, you are refreshing the whole page, its not going to have a callback — max li, Aug 01 '13 at 06:01
The accepted answer is incorrect. == see the topic: http://stackoverflow.com/questions/39127730/jquery-if-condition-is-false-but-still-executed — T.Todua, Aug 24 '16 at 16:00

score 22 · Accepted Answer · edited Jul 18 '18 at 14:00

22

You can use sessionStorage:

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

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

edited Jul 18 '18 at 14:00

d.i.joe

606
9
22

answered Aug 01 '13 at 06:01

Akhil Sekharan

12,467
7
40
57

2

Hi, I fixed some formatting for you. In the future it would be great if you could prefer full words over 'sms speak' - for example "you" over "u". It's easier for readers - thanks and thanks for your contribution. – Benjamin Gruenbaum Aug 01 '13 at 06:05
4

Hey I just noticed that this code doesn't work. `if ( sessionStorage.reloadAfterPageLoad )` will always be execute. See http://stackoverflow.com/questions/39127730/jquery-if-condition-is-false-but-still-executed/39127785 for details. – Adam Aug 24 '16 at 15:56

Michael Unterthurner · Answer 2 · 2013-08-01T06:04:09.860

2

That's called onload. It came waaaaay before DOM ready was around, and DOM ready was actually created for the exact reason that onload waited on images.

window.onload = function () { 
    alert("It's loaded!");
    //dom not only ready, but everything is loaded
}

And a jQuery Javascript solution is to bind the window.onload event in document.ready().

$(window).bind("load", function() {
   // code here
});

edited Aug 01 '13 at 06:04

answered Aug 01 '13 at 05:59

Michael Unterthurner

921
1
10
25

@MichaelUnterthurner Will it not work on the initial go? Won't it show the message the _first_ time the user enters the page? – Benjamin Gruenbaum Aug 01 '13 at 06:06
only the first or everytime when the user reloads the page? – Michael Unterthurner Aug 01 '13 at 06:08
If you put the alert in onload function, then It will show the alert message every time the page loads, even the first time. – Ebenezar John Paul Aug 01 '13 at 09:50

score 2 · Answer 3 · answered Feb 08 '19 at 22:14

Hui, a old post. But i´m looking too for a solution to add a script after reload when click a order save button in woocommerce admin order. I think it is a great way to use the sessionStorage and not some hooks. Thanks to Akhil for open the eyes. Maybe some one looking too:

jQuery('.button.save_order.button-primary').click(function() {

            sessionStorage.setItem('save_order',true);

});

jQuery( function () {
        if ( sessionStorage.getItem('save_order') ) {
                alert( "Hello world" );
                sessionStorage.removeItem('save_order');
            }
});

suhailvs · Answer 4 · 2013-08-01T06:37:36.267

0

Some dirty method of doing it with ?reload string in link href like request.GET in php

<a class="button" href="?reload/">reload and alert</a>
<script type="text/javascript">         
    args = location.search.substr(1);
    if (args=='reload/')alert('page reloaded');  
</script>

edited Aug 01 '13 at 06:37

answered Aug 01 '13 at 06:02

suhailvs

20,182
14
100
98

1

Are you sure that checks for document reloaded and not just document loaded? – Benjamin Gruenbaum Aug 01 '13 at 06:06

Sagar W · Answer 5 · 2016-04-28T13:19:43.170

Step 1 : Write your own function for alert popup with ok button (i have created parameterized function which accept message, alert type, method name.

function AlertMessageOk(str, alertType, method)
{

     $('#AlertMessage .divDialogElements').empty();

     $('#AlertMessage .divDialogElements').append(msg);

     if (alertType == "success") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Success");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-success");
     }
     else if (alertType == "error") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Error");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-danger");
     }
     else if (alertType == "info") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Status");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-info");
     }
     else if (alertType == "warning") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Warning");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-warning");
     }

     $('#AlertMessage #btnAlertOk').attr("onclick", method);

     $('#AlertMessage').modal('show');
 }

Step 2: On your ajax response.result == true call to AlertMessageOk function. I have passed method name to reload page.

function buttonActivate_onClick(storeID) {

     $.ajax({
         type: "POST",
         url: "/configuration/activateStore",
         timeout: 180000,
         data: { StoreID: storeID },
         success: function (response) {
             if (response.result == true) {
                 AlertMessageOk("Store configuration for Store ID " + storeID + " is successfully activated.", "success", "reloadPage();");
             }
         },
         error: function (xhr, textstatus) {
             AlertMessage("Error:   " + xhr.statusText + "  [" + xhr.status + "]", "error");

         }
     });
     $('#wait_load').css("display", "none");
 }


 function reloadPage() {
   location.reload();        
 }

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

5 Answers5

Linked