2

So I have a sort of newbie of a question : How can I detect if a page have been reloaded after the initial load ?

I am asking that question because I have a problem : My JavaScript code works as it should when the user gets to the page. But when the user is on that page and reload the page ,the code breaks and stop working.

I'm trying to find a way for the code to reloads if the page reloads or to edit my code to fix the problem.

Here is the code. It a dynamic drop-down list with one parent and one child:

"use strict";

/*
The dynamic drop-down does not work properly with safari on mac OS. It does disable child options but they remain visible.
 */

window.onload = function () {

    //parent function start here ...
    function parent_() {
        let p = document.getElementById('category_select'),
            c = p.options[p.selectedIndex].value;
        return c; // return parent options value
    }
    //child function start here ...
    function child_() {
        // create a list of all child options in the dropdown ...
        let c = document.getElementById('type_select');
        for (let l = 0; l < c.options.length; ++l) {

            // if parent options value === child option values it display all child options values that match the selected parent value
            if (c.options[l].value === parent_()) {
                c.options[l].style.display = 'block';
                c.options[l].disabled = false;

                // and disable all child options that dont match the selected parent value
            } else
            if (c.options[l].value !== parent_()) {
                c.options[l].style.display = 'none';
                c.options[l].disabled = true;
            }
        }
    }
    let l = document.location.pathname;
    if (l === "/get-started") {
        // on page load, disable child drop-down
        let p = document.getElementById('category_select'),
            c = document.getElementById('type_select'),
            p_ = p.options[p.selectedIndex].value;
        if (p_ === "") {
            c.disabled = true;
        }
        p.addEventListener("change", function () {
            let p = document.getElementById('category_select'),
                c = document.getElementById('type_select'),
                p_ = p.options[p.selectedIndex].value;
            if (p_ !== "") { //parent drop-down has a selected value ...
                //get first child with options value equal to parent's one
                c.value = p_;
                //disable the child drop-down
                c.disabled = false;
                child_();
            } else if (p_=== "") {
                c.value = p_;
                c.disabled = true;
            }
        })
    } else
        if (l !== "/get-started"){
            return null;
        }
};
cobak
  • 89
  • 5
  • This question may help you out, as it sounds like you're having an issue with the `window.onload()` function not functioning on reload. This issue is likely caching, https://stackoverflow.com/questions/19917436/window-onload-not-running-on-page-refresh – Ryan Kozak Aug 10 '18 at 06:25

1 Answers1

0

  • You need a variable to save your page's state when your page is destoryed.

  • So in this idea, you can try cookies or localStorage, even add the states to url as params. When initials the page, reads localStorage(For example), if state exists, read those variables rende your drop-down. If not, get state from last page and initial.

orzorzorzorz
  • 33
  • 6
  • You mean saving the state of the page in a variable and the when the page reload, comparing states through variable to determine whether or not to load the JS script ? – cobak Aug 10 '18 at 06:39
  • Yes, you get it. – orzorzorzorz Aug 10 '18 at 06:45
  • Okay thanks. That's what I thought. Are you positive there is no easier way to do this bt editing my JS code ? – cobak Aug 10 '18 at 06:49