ajax定期的な更新でトグルを入れる方法

私は、サーバーからデータ/イベントをプルするJSPで動的ページを持っています。そして、Ajaxを使用して、一定の時間間隔でページを定期的に更新しています。今、私は、ページの自動更新を一時停止し、再びそれを再生することができるように、トグル（再生/一時停止）ボタンを載せていきたいと思います。以下は私のpages-ajax定期的な更新でトグルを入れる方法

出力ページされています

<html> 
<head> 
<title>EventMonitoring</title> 
<script type="text/javascript"> 
var page = "realTime.jsp"; 
function ajax(url,target) 
{ 
    // native XMLHttpRequest object 
    document.getElementById(target).innerHTML = 'sending...'; 
    if (window.XMLHttpRequest) 
    { 
     req = new XMLHttpRequest(); 
     req.onreadystatechange = function() {ajaxDone(target);}; 
     req.open("GET", url, true); 
     req.send(null); 
    // IE/Windows ActiveX version 
    } 
    else if (window.ActiveXObject) 
    { 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
     if (req) 
     { 
      req.onreadystatechange = function() {ajaxDone(target);}; 
      req.open("GET", url, true); 
      req.send(); 
     } 
    } 
    setTimeout("ajax(page,'scriptoutput')", 60000); 
} 

function ajaxDone(target) 
{ 
    // only if req is "loaded" 
    if (req.readyState == 4) 
    { 
    // only if "OK" 
    if (req.status == 200 || req.status == 304) 
    { 
     results = req.responseText; 
     document.getElementById(target).innerHTML = results; 
    } 
    else 
    { 
     document.getElementById(target).innerHTML="ajax error:\n" + 
     req.statusText; 
    } 
    } 
} 
</script> 

</head> 
<body onLoad="ajax(page,'scriptoutput')"> 
<span id="scriptoutput"></span></p> 
</body> 
</html>

（サーバーからデータをプル）動的ページ

<%@page contentType="text/html; charset=iso-8859-1" language="java"  import="java.sql.*,java.util.*,java.io.*,javax.servlet.jsp.JspException" errorPage="" %> 
<%@ page import="event.activeMq.*"%> 
<jsp:include page="../include/adminSessionManager.jsp" /> 
<jsp:useBean id="msg" scope="request" class="event.activeMq.ConsumerTool"> 
<jsp:setProperty name="msg" property="*" /> 
</jsp:useBean> 
<% 
MessageBean msgs = msg.getMessages(); 
java.util.Iterator dateList = msgs.getDateTime().iterator(); 
java.util.Iterator atmList = msgs.getAtmId().iterator(); 
java.util.Iterator eventTextList = msgs.getEventText().iterator(); 
java.util.Iterator evtNumList = msgs.getEventNumber().iterator(); 
java.util.Iterator sevList = msgs.getSeverity().iterator(); 
java.util.Iterator genList = msgs.getGenerator().iterator(); 
java.util.Iterator genBldList = msgs.getGeneratorBuildVsn().iterator(); 
java.util.Iterator ssidList = msgs.getSubsystemID().iterator(); 
java.util.Iterator taskList = msgs.getTaskID().iterator(); 
java.util.Iterator uniqueList = msgs.getUniqueEventID().iterator(); 
%> 


<html> 
<head> 
<title>Event Monitoring</title> 
<link href="../css/style.css" rel="stylesheet" type="text/css"> 
<script language="JavaScript" type="text/JavaScript"> 

</script> 

<script language="javascript"> 
    /*gives the branchname and branchcode for bank selected*/ 
</script> 


</head> 
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onLoad="document.forms[0].name.focus();"> 
<jsp:include page="../include/header.jsp"/> 

    <table width="100%" height="450" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="220" align="left" valign="top" bgcolor="#f2f2f2"> 
    <jsp:include page="../include/menuManager.jsp" /> 
    </td> 
     <td height="100%" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="8"> 
      <tr> 
      <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
       <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
        <td>&nbsp;</td> 
        </tr> 
        <tr> 
        <td height="1" bgcolor="#999999"></td> 
        </tr> 
       </table></td> 
       </tr> 
       <tr> 
       <td height="2"></td> 
       </tr> 
      </table> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
         <td width="183" height="19" bgcolor="#373948" class="titlelink"> &nbsp;<span class="title">&nbsp;RealTime Events </span></td> 
         <td width="148" bgcolor="" class="titlelink"> <font color="#FF0000">&nbsp; </font> </td> 
         <td width="439" bgcolor="" class="titlelink"><font color="#FF0000"> 
         <%//if(msg != null){ 
         //out.print(msg); 
         //}%> 
         </font></td> 
        </tr> 
        </table></td> 
       </tr> 
       <tr> 
        <td> 

        <table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#373948"> 
         <tr align="center" bgcolor="#FAFAFA"> 
         <td width="14%"> 
         <form name="f1"action="doAddUser.jsp" method="post"> 

         <table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#ECE9D8"> 
         <%while(dateList.hasNext() || atmList.hasNext() || eventTextList.hasNext() || evtNumList.hasNext() || sevList.hasNext() || genList.hasNext() || genBldList.hasNext() || ssidList.hasNext() || taskList.hasNext() || uniqueList.hasNext()){ 
        String dateTime=(String)dateList.next(); 
        String atmId=(String)atmList.next(); 
        String eventText=(String)eventTextList.next(); 
        String eventNumber=(String)evtNumList.next(); 
        String severity=(String)sevList.next(); 
        String generator=(String)genList.next(); 
        String generatorBuildVsn=(String)genBldList.next(); 
        String subsystemID=(String)ssidList.next(); 
        String taskID=(String)taskList.next(); 
        String uniqueEventID=(String)uniqueList.next(); 
         %>       
<tr> 
    <td width="45%"><strong> SubsystemId </strong></td> 
    <td width="55%"> <%=subsystemID%></td> 
</tr> 
<tr> 
     <td><strong>Severity</strong></td> 
           <td><%=severity%></td> 
           </tr> 
           <tr> 
           <td><strong>TaskID</strong></td> 
           <td><%=taskID%> </td> 
           </tr> 
           <tr> 
           <td><strong>UniqueEventID</strong></td> 
           <td><%=uniqueEventID%></td> 
           </tr> 
           <tr> 
           <td><strong>Event Text</strong></td> 
           <td><%=eventText%></td> 
           </tr> 
           <tr> 
           <td><strong>Event Number</strong></td> 
           <td><%=eventNumber%></td> 
           </tr> 
           <tr> 
           <td><strong>Date Time</strong></td> 
           <td><%=dateTime%> </td> 
           </tr> 
           <tr> 
           <td><strong>Generator</strong></td> 
           <td><%=generator%></td> 
           </tr> 
           <tr> 
           <td><strong>Generator Build VSN</strong></td> 
           <td><%=generatorBuildVsn%></td> 
           </tr> 
           <tr> 
           <td><strong>Atm ID</strong></td> 
              <td><%=atmId%></td> 
           </tr> 
           <tr> 
           <td><hr></td> 
           <td><hr></td> 
           </tr> 

    <%}%>         
         </table> 
        </form> 
         </td> 
         </tr> 
        </table></td> 
       </tr> 
      </table></td> 
      </tr> 
     </table></td> 
    </tr> 
    </table></td>   
    </tr> 
    <tr> 
    <td valign="top" bgcolor="#FFFFFF"> 
    <jsp:include page="../include/footer.html" /> 
    </td> 
    </tr> 
    </table> 
    </body> 
    </html>

は、誰かがプレイを追加する方法を手伝ってくれる/一時停止ボタン？あなたの助けに感謝します。

出典

2012-04-30 user1254261

適切にあなたのコードをフォーマットしてください！ – coolguy

もう一度フォーマットしてください。見てください。 – user1254261

setTimeoutの代わりにsetIntervalを使用します。 Here's例：

<div id="mydivtag"> 
    <button id="start">start</button> 
    <button id="stop">stop</button> 
</div>

はJavaScript：

var intervalId; 

var sayHello = function() { 
    document.getElementById('start').disabled = true; 
    document.getElementById('stop').disabled = false; 
    intervalId = setInterval(function() { 
     var node = document.createTextNode("hello!");   
     document.getElementById('mydivtag').appendChild(node); 
    }, 1000); 
} 

window.onload = sayHello; 

document.getElementById('start').onclick = sayHello;  

document.getElementById('stop').onclick = function() { 
    document.getElementById('start').disabled = false; 
    document.getElementById('stop').disabled = true; 
    clearInterval(intervalId); 
}

出典

2012-04-30 09:45:40

ロード時に起動してから、ユーザがポーズをクリックした後に再開する場合 – user1254261

ワイヤリングボタンが追加されました。うまくいけば、正しい方向に向けることができます。 –

私が開始ボタンまたは停止ボタンをクリックしたときに、その動作していない、生成されたテキストhelloはstopped.itが実行を続ける。 – user1254261

ajax定期的な更新でトグルを入れる方法

答えて

関連する問題