页面重新加载后按钮更改

时间:2014-11-05 11:18:03

标签: javascript jquery html css

所以我有一个按钮,我想控制一个过程。该过程可以运行/暂停/停止。

<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将值发送回我的控制器。

任何人都知道解决这个问题的方法或更好的实施方法。

提前致谢

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

尝试以下代码:

function sendData(){
 //your implementation

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

 function sendData1(){
 //your implementation

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

通过点击运行,将调用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";
}  

答案 4 :(得分:0)

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

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按钮。 反之亦然...