How to Reload a Page Using JavaScript

How do I refresh a page using JavaScript?

Use location.reload().

For example, to reload whenever an element with id="something" is clicked:

$('#something').click(function() {
    location.reload();
});

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser's cache.

Refresh page and run function after - JavaScript

You need to call myFunction() when the page is loaded.

window.onload = myFunction;

If you only want to run it when the page is reloaded, not when it's loaded for the first time, you could use sessionStorage to pass this information.

window.onload = function() {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        myFunction();
    }
}

function reloadP() {
    sessionStorage.setItem("reloading", "true");
    document.location.reload();
}

DEMO

Is there a way to reload page and after that inmediately open a modal?

When you call window.location.reload(), the page is reloaded just like when you press f5 or hit enter on your url bar. This means your current page state is lost, so the execution of your code is interrupted and starts over from the beginning on the freshly loaded page.

What you could do is add a hash to your url when the user clicks the button (for example https://www.my.page/#modal) and then check if this is present when you load the page:

//this executes when the page is ready
$(function() {
    if($(location).attr('hash') === '#modal') {
        $('#modal_perso').modal('show');
    }
});

Note that if somebody bookmarks the page including the hash, this will also be executed.

In your edit, you are trying to use window.location.href.split('#')[0] to remove the hash from the url. By itself, this doesn't do anything - it is just a value. You need to assign the value to something. You can not assign the value directly to window.location.href here because this will make most browsers reload the page.

What you can do is use HTML5 history API like this for example:

window.history.pushState(null, document.title, window.location.href.split("#")[0]);

Avoid page reload and when press reload using Javascript/JQuery

You can't really prevent the user from reloading, as it is a default behavior of the browser, what you can do is store the timer value somewhere (a backend server or localstorage) and then fetch the value from there during each session

// you cannot run this snippet here because of stack security reasons
let timerValue = localStorage.getItem('timer') || 10; // if timer value is not found then it should be 10 seconds by default

const wait = (ms) => new Promise(r => setTimeout(r, ms));

run();

async function run() {
    console.log('timer has begun');
    while(true) {
        if (timerValue <= 0) break;
        timerValue--;
        localStorage.setItem('timer', timerValue);
        await wait(1000);
    }

    console.log('timer has ended');
    localStorage.setItem('timer', null); // reset timer once the test is finished
}

---

Related Topics