Javascript: disabling HTML Select option issue on browser back-button

Question

As in the title, I'm struggling with what I thought being a trivial issue: disabling an option from an HTML Select tag list when I click on an aforethought radio button.
My code does work, but when a user hits the browser back-button, my function doesn't get called anymore, so the previously disabled selector can now be chosen from the list. I'd prefer to avoid reloading the HTML page when I press the back-button using PHP, as advised in this topic.

This is my Javascript code:

$(function () {
    $("#radioButton1").on("click", function () {
        $("#selector3").prop("disabled", false);
    });

    $("#radioButton2").on("click", function () {
        var selector = $("#selector3");

        selector.prop("disabled", true);
        selector.css("background", "#dddddd");

        $("#orderByList").val("1");
    });
});

you should probably save the user selection before changing the URL and check for saved value when the page is loading — Lasithds, Mar 22 '18 at 15:05
But this will not solve my issue: pressing the back button uses the cached version of the web page, so I'm already saving the user selection. In my second page I've an home button: using it solves my issue. Still, the real problem comes up if a user choose to get back by the means of the aforementioned browser button. — Davide3i, Mar 22 '18 at 15:14
Disable the select by default and then enable it with script when you hit the page. If it's using a cached version of the page and not running scripts when you hit the back button then that will resolve your issue. — Reinstate Monica Cellio, Mar 22 '18 at 16:47
looking at this code it's hard to tell what could go wrong. Could you provide a working fiddle — Lasithds, Mar 22 '18 at 16:47
I've found a Javascript solution. I'll post references in an answer. — Davide3i, Mar 23 '18 at 06:03

score 0 · Answer 1 · answered Mar 22 '18 at 15:01

Could you try using functions outside of the $(function () {}); block

<script>
$("#radioButton1").on("click", function () {
        $("#selector3").prop("disabled", false);
    });

    $("#radioButton2").on("click", function () {
        var selector = $("#selector3");

        selector.prop("disabled", true);
        selector.css("background", "#dddddd");

        $("#orderByList").val("1");
    });
</script>

Binding could be done in tags only

score 0 · Accepted Answer · answered Mar 23 '18 at 06:06

I've found a working solution in this answer.

window.addEventListener("pageshow", function (event) {
    var historyTraversal = event.persisted || (typeof window.performance !== "undefined" && window.performance.navigation.type === 2);

    if ( historyTraversal ) {
        // Handle page restore.
        window.location.reload();
    }
});

Javascript: disabling HTML Select option issue on browser back-button

2 Answers2