页面重新加载后按钮更改

Question

因此，我有一个要控制过程的按钮。 该过程可以运行/暂停/停止。

<div>
    <button class="buttonAction" id="run"  onclick = "sendData()"   >Run</button>
    <button class="buttonAction" id="pause" onclick = "sendData1()" >Pause</button>

</div>   

因此，这些按钮位于相同的位置，而我想要的是单击运行按钮时出现的暂停按钮，反之亦然。

  function sendData(){
   //some values
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db +  '&fsvalue=' + fs;
document.getElementById("run").style.visibility="hidden";
  document.getElementById("pause").style.visibility="visible";

} 

发生了什么，它出现了一秒钟，但是由于页面重新加载window.location.href，我正在使用该页面将值发送回我的控制器，因此又恢复运行。

有谁知道解决此问题的方法或实现它的更好方法。

提前致谢

Answer 1

重新加载页面就像擦除白板然后重新开始一样。 下一页不会记住您在其后运行的JavaScript的状态。 按钮的设置需要在下一页加载时进行。 理想情况下，您的服务器端代码应设置按钮的状态。

Answer 2

试试下面的代码：

function sendData(){
 //your implementation

 $("#run").css("visibility","hidden");
 $("#pause").css("visibility","visible");
} 

 function sendData1(){
 //your implementation

 $("#pause").css("visibility","hidden");
 $("#run").css("visibility","visible");
} 

Answer 3

重新加载页面后，您将需要使用Cookie或会话来保留更改。

Answer 4

通过单击运行，将在该运行中调用sendData函数，并且不会显示暂停，因为我保持style.display =“ none”的方式与我们单击暂停时相同，因此运行按钮将不会显示使用style.display =“ none”

function sendData(){
document.getElementById("run").style.display="block";
document.getElementById("pause").style.display="none";
}
function sendData1(){
document.getElementById("run").style.display="none";
document.getElementById("pause").style.display="block";
}  

Answer 5

所以我解决了这个问题。 一些答案没有考虑页面被重新加载。 当用户单击运行时，我会将其发送回控制器

window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db+  '&buttonValue=' + "hideRun"

然后在控制器中，我执行了hideRun并将其发送回页面

 String button = params.buttonValue
 render view:'run.gsp', model:[button:button]

然后我有一个在每次页面加载时调用的函数

             window.onload = function()

哪个检查了值

        "${button}"

然后，如果说“ hideRun”，它将隐藏urn按钮，该按钮将显示暂停按钮。 反之亦然...