How to refresh the current page in javascript and then call jQuery functions

Question

When a.format24 is clicked, I want the page to reload then .fadeOut() an element and change some text. Obviously, the way the code set up below is wrong because the page reload and jQuery functions are occurring at the same time. Running the jQuery functions through the location.reload() doesn't work, so I'm out of ideas.

$(document).ready(function() {
        $("a.format24").toggleClick(function() {
            location.reload();
            $("div.toggleWrap").fadeOut();
            $(this).text("Use am/pm format");
            }, function() {
            location.reload();
            $("div.toggleWrap").fadeIn();
            $(this).text("Use 24-hour format");
        });
});

Why would you need to reload the page? Are you setting a cookie? — StackSlave
– StackSlave, Commented Mar 27, 2014 at 0:31

jfriend00 · Accepted Answer · 2014-03-27 02:08:46Z

2

The usual way to solve this issue (if you must actually reload the page) is to add a parameter to the URL and then load that URL. So, if your original URL was http://example.com/play.html, then you would load the URL: http://example.com/play.html?special=1.

Your startup code on the page would check for special=1 in the query parameters for the URL and if it found that, it would initiate the special behavior upon page load.

You obviously have to plan ahead for the special page-load behaviors you want to support, but it's very doable.

OK, let's say that when you load your page the second time, you want the a.format24 text to change. We'll design it so that time=24 in the URL means 24 hour format and time=12 in the URL means 12 hour am/pm format. The default if neither exists will be the 12 hour format.

When dealing with the search parameters in the URL, you have three conditions to deal with:

There are no search parameters
There are some search parameters, but not the one you're looking for
There are some search parameters including the one you're looking for

Based on which condition you find, you have to handle constructing the new URL with the desired search parameter differently. That's why the code below has three different branches for constructing the URL.

// initialize the time format based on what's in the search parms of the URL
$(document).ready(function() {
    var format24 = /time=24/.test(document.location.search);
    if (format24) {
        $("a.format24").data("format", 24).hide().text("Use 24-hour format").fadeIn();
    }
});

$(document).ready(function() {
    // upon click, switch to the other time format in the URL
    $("a.format24").click(function() {
        var self = $(this), newFormat;
        // if currently in 24 hour mode
        if (self.data("format") == 24) {
            newFormat = "time=12";
        } else {
            newFormat = "time=24";
        }
        var newUrl = location.href;
        // if no search value yet in the URL
        if (!window.location.search) {
            // no parms on the URL at all so
            // just add ?time=24 to the end of the URL
            newUrl += "?" + newFormat;
        } else if (window.location.search.indexOf("time=") !== -1) {
            // replace any existing format with the new one
            newUrl = newUrl.replace(/time=\d+/, newFormat);
        } else {
            // some search params exist, but not the time format 
            // so add onto the end after the other search params
            newUrl += "&" + newFormat;
        }
        self.fadeOut(500, function() {
            window.location = newUrl;
        });
    });
});

Working demo: http://jsfiddle.net/jfriend00/2h3KE/

The other way of doing this would be to not reload the page at all and just use DOM manipulations to change the page as desired without reloading.

edited Mar 27, 2014 at 2:08

answered Mar 27, 2014 at 0:22

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Uncle Slug Over a year ago

I'm attempting to use the page reload as a way to avoid troubleshooting a calculation error that is being caused by an extremely unlikely use case. Eventually the site will be rebuilt, so applying a bandaid is all the time I wanted to invest. How do I add a parameter to the url?

jfriend00 Over a year ago

@UncleSlug - window.location.href gives you the current page URL. If you know there are no parameters on it already, you can just do window.location = window.location.href + "?special=1";. If there might be parameters on it already, then a little more logic is needed, but it's all just string operations so I presume you can handle that. Then, when the page loads, you can check window.location.search to see what parameters are on the page URL.

Uncle Slug Over a year ago

I appreciate the help, jfriend00. There are no other parameters involved. However, I don't understand what information I would be replacing ?special=1 with. Does this represents a variable?

jfriend00 Over a year ago

It's just a string on the end of your URL. I'll put some more code in my answer.

Collectives™ on Stack Overflow

How to refresh the current page in javascript and then call jQuery functions

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related