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");
        });
});

Answer 1

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:

1. There are no search parameters
2. There are some search parameters, but not the one you're looking for
3. 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.