Button gets enabled on refresh

Question

I've 2 buttons in my HTML page, first one is enabled and the second one is disabled and when I click the first the first one, the first one gets disabled and the second one is enabled and the same goes with the second button, when I click the second button (When this gets enabled), the first one gets disabled, and this is working totally fine. Here I came up finding this problem when I did a refresh accidentally.

I click the first button, the second gets enabled, disabling the first one. After a refresh it goes to the initial state, i.e., the first gets enabled and second is disabled.

Below is the piece of code.

<tr>
    <td>SubTask</td>
    <td>
       <select id="subtask" name="subtask">
           <option value="Subtask">Subtask</option>
       </select>
    </td>
</tr>
<tr>
    <td><input type="button" value="Start" name="Start" id="Start" /></td>
    <td><input type="button" value="Stop" name="Stop" id="Stop" disabled="disabled" /></td>
</tr>



<script type="text/javascript">
    $(document).ready(function() {
        var form = $('#formSec');
        var task = document.getElementById('task');
        var subtask = $('#subtask');
        $('#Start').on("click", function() {
            $.ajax({
                type : "post",
                url : "UpdateStartTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", true);
                    $('#subtask').attr("disabled", true);
                    $('#Start').attr("disabled", true);
                    $('#Stop').attr("disabled", false);
                }
            });
            return false;
        });

        $('#Stop').on("click", function() {
            var form = $('#formSec');
            var task = document.getElementById('task');
            var subtask = $('#subtask');
            $.ajax({
                type : "post",
                url : "UpdateEndTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", false);
                    $('#subtask').attr("disabled", false);
                    $('#Start').attr("disabled", false);
                    $('#Stop').attr("disabled", true);
                }
            });
            return false;
        });

    });
</script>

There is some posting functionality added in the js above, please ignore it.

if you mean a refresh as in reloading the page that's normal. A web page is stateless. You need to store the state somewhere and reload it on page refresh. — Asken, Jun 14 '16 at 13:02
If you want your button states to be consistent after a refresh, you need to save the states somewhere. Possible "locations": cookies, localStorage, sessionStorage, server. — Mike Scotty, Jun 14 '16 at 13:02
So how do you want your markup to know which button should have `disabled` attribute on page load? You should store some data in `localStorage` / database / controller etc. defining the state of your page — markoffden, Jun 14 '16 at 13:03
When you call updateEndTime or updateStartTime, I would set a variable like Boolean blnstart (true if updateStartTime was clicked). Then when you actually call this page, you can use: ''if(blnstart){$('#Start').trigger('click')}else..'' — Hozeis, Jun 14 '16 at 13:04
See http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/30144363?s=2|1.3568#30144363 — guest271314, Jun 14 '16 at 13:16

score 1 · Accepted Answer · answered Jun 14 '16 at 13:15

1

U can achieve this by setting a variable to localStorage. That will give you the facility to access the tiggered button.

Such as:

$('#Start').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "start");
  }
});

similarly..

$('#Stop').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "stop");
  }
});

The access that in this way:

if (typeof(Storage) !== "undefined") {
   var stat = localStorage.getItem("clickStat");
   if(stat == "start"){
     $('#Start').attr("disabled", true);
     $('#Stop').attr("disabled", false);
   }else{
     $('#Start').attr("disabled", false);
     $('#Stop').attr("disabled", true);
   }
}

answered Jun 14 '16 at 13:15

Gautam Kumar

48
1
6

Thanks man, You are life saviour, But there is another problem that's coming, When I re login into my app, if i click the button and close my window and again when I login, it is still showing the disabled button :(, any workaround for this? – Rakesh Jun 14 '16 at 13:49
Hey Thanks Alot Man, I found it, just used `localStorage.clear();`, in my login.jsp :) – Rakesh Jun 14 '16 at 13:52
Rakesh, one thing I would like to say, that localStorage.clear(); will remove all data stored in localStorage. That is a major drawback if you have multiple variable storage. Use this: localStorage.removeItem(clickStat); Thanks... you will get result as you needed. – Gautam Kumar Jun 15 '16 at 06:51
And related to auto relogin after window close, you can again remove Item from localStorage, on window.onunload event, this will clear your variable from local storage when your window is in closing state. So to next app opening state you will not find any such variable in your localStorage... :) – Gautam Kumar Oct 01 '18 at 13:23

score 0 · Answer 2 · answered Jun 14 '16 at 13:14

When you update the button state, save it to localStorage:

localStorage.setItem("btn1enabled", false);
localStorage.setItem("btn2enabled, true);

Then, when you load the page, you can enabled/disabled the buttons based on what

localStorage.getItem("btn1enabled"); and localStorage.getItem("btn2enabled");

give you.

(note: localStorage won't have anything saved the first time you load the page, so you will have to consider that case in code)

Button gets enabled on refresh

2 Answers2