-1

I need to detect page dirty flag in my application.

I used:

<form name="ignore_me">
    <input type="text" value="0" id='page_is_dirty' name='txt' style="display: none" /> 
</form>

To set flag in my HTML:

<script>
    var dirty_bit = document.getElementById('page_is_dirty');
    if (dirty_bit.value == '1') {
        //Some one went to other site and now came back using back button
        alert('On back button , dirty page.');
        callWicket();
    }
    //first time page load so mark it dirty
    function mark_page_dirty() {
        dirty_bit.value = '1';
        alert('In 3 dirty_bit = ' +dirty_bit.value);
    };
    mark_page_dirty();
    alert('In 4 dirty_bit = ' +dirty_bit.value);
</script>

This keep value as 1 when I again visited same page by clicking back button if user click on any URL other than application URL and press back button to come again in application.

But it only kept value 1 in chrome. In IE 11 it's not keeping old value 1 and reload form data and set again to 0.

I need to get stored form data in IE . Is there any way to get page_is_dirty value from form data?

krlzlx
  • 5,752
  • 14
  • 47
  • 55
user3283447
  • 1
  • 1
  • 2
  • In Chrome, if your refresh the page by Ctrl+F5 ( a "hard refresh"), does Chrome retain the value "1" of the input? – vothaison Nov 10 '16 at 08:00

2 Answers2

0

Well getting and setting form values as you've done is correct, but could be simplified to something like:

<form id="test">
    <input id="dirty" type="hidden" value="no" />
</form>

<script>
    function isDirty() {
        var dirty = document.getElementById("dirty").value;
        return (dirty === "yes");
    }

    function setDirty(dirty) {
        document.getElementById("dirty").value = (dirty) ? "yes" : "no";
    }

    console.log("Dirty?", isDirty());
    setDirty(true);
    console.log("Dirty?", isDirty());
</script>

But for keeping this state between page loads, perhaps consider using something like localstorage instead of just a form:

<script>
    function isDirty() {
        var dirty = window.localStorage.getItem("page_dirty");
        return (dirty === "yes");
    }

    function setDirty(dirty) {
        window.localStorage.setItem("page_dirty", (dirty) ? "yes" : "no");
    }

    console.log("Dirty?", isDirty());
    setDirty(true);
    console.log("Dirty?", isDirty());
</script>

That way, your state will be there between page loads of the same site. If absolutely required, you could combine these to update a form value when setting.

Perry Mitchell
  • 665
  • 6
  • 16
  • A minor point to note too is that localstorage is blocking and offers no async approach to setting or getting, so use it sparingly. Migrating away from localstorage in cases like this would be a premature optimisation, however. – Perry Mitchell Nov 10 '16 at 08:10
  • thanks it works i have added one more check and its working for back button detection. – user3283447 Nov 10 '16 at 09:54
  • if(page_dirty=="yes" && dirty=="no" && (currentURL==oldURL)){ return true; }else return false; – user3283447 Nov 10 '16 at 09:54
  • var currentURL = document.location.href; var oldURL = window.localStorage.getItem("oldPageURL"); – user3283447 Nov 10 '16 at 09:55
  • If you don't care about IE 9 and earlier, you could try using [popstate](http://stackoverflow.com/a/37115083/966338) to detect a user going "back". In the callback you could possibly write a dirty flag to localstorage before the navigation. – Perry Mitchell Nov 11 '16 at 08:28
0

That is just a "feature" of Chrome browser. When you click back, the browser doesn't make any http request, it just re-renders what it has from the previous request. And interestingly Chrome retains the input value, while IE doesn't. I just notice that Firefox also does it its own way.

I believe there is no specification forces browsers to retain input value in such cases.

So, your technique doesn't work consistently in all browsers.

You should use some other techniques such as cookies, session; or localStorage for new browsers.

vothaison
  • 1,646
  • 15
  • 15