如何避免使用jQuery每x秒重新加載一個特定的「div」時附加其他「div's」？

-1

我在一個項目中，我試圖重新加載DIV無需重新加載整個頁面每隔30秒的工作 -如何避免使用jQuery每x秒重新加載一個特定的「div」時附加其他「div's」？

下面是我在我的JSP文件(dataInfo.jsp)格，我想重新加載DIV container每30秒無重新加載整個頁面。

<body> 
    <div id='headerDivDash'> 
     <h1 id='topHeaderDash'> 
      <!-- some image here --> 
     </h1> 
    </div> 
    <div id="vertical-list" style='display: block; list-style-type: none;'> 
     <ul class="resp-tabs-list"> 
      <a href="_blank"><li>Test 1</li></a> 
      <br /> 
      <a href="_blank"><li>Test 2</li></a> 
     </ul> 
    </div> 

    <!-- just need to reload this div, other div should be intact without getting appended --> 
    <div class="container"> 
     <c:forEach var="e" items="${testing.data}"> 
      <div class="component"> 
       <h3> 
        For 
        <c:out value="${e.key}" /> 
       </h3> 
       <table id="tabDes" style=''> 
        <thead> 
         <tr> 
          <th>Machine Name</th> 
          <th>Fresh 95</th> 
         </tr> 
        </thead> 
        <tbody> 
         <c:forEach var="m" items="${e.value}"> 
          <tr> 
           <th>${m.machines}</th> 
           <td class="color-changer">${m.Fresh 95}</td> 
          </tr> 
         </c:forEach> 
        </tbody> 
       </table> 
      </div> 
     </c:forEach> 
    </div> 
    <div class="footer">Some Value Here</div> 
</body>

而且下面是我在我的控制器方法 -

@RequestMapping(value = "testOperation", method = RequestMethod.GET) 
public Map<String, Mapping> testOperation() { 

    final Map<String, Mapping> model = new LinkedHashMap<String, Mapping>(); 

    // .. some code here 

    Mapping mappings = Utils.getData(machines); 

    model.put("testing", mappings); 
    return model; 
}

所以在瀏覽器上，我打 - http://some.host.com:8080/web/testOperation然後它讓我從瀏覽器上的JSP文件的實際內容。

現在下面是我使用加載div container每30秒

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var auto_refresh = setInterval(
     function() 
     { 
     $('.container').html(''); 
     $('.container').load('dataInfo.jsp').fadeIn("slow"); 
     }, 30 * 1000); 

    }); 
</script>

jQuery的腳本現在，我面臨的問題是，如果我重裝container股利每30秒，然後我的頭DIV和頁腳div，他們每次都會被追加，我不知道我應該如何解決這個問題？有什麼想法嗎？

我的最終目標是每30秒加載一次container div，無需重新加載頁面，也不需要附加任何其他div。這是所有

來源

2014-03-12 AKIWEB

http://api.jquery.com/load - 看* 「加載頁面片段」 * –

啊哈..有道理..我不是一個UI/jQuery的傢伙。所以在我（'。container'）。load（'dataInfo.jsp #container'）。fadeIn（「slow」）;'？正確？ – AKIWEB

'.container'，而不是'＃容器'（除非你的div也有一個'id =「container」'） –

好耶，因爲你得到了整個dataInfo文件（頁眉，頁腳和所有）每次。

獨立的文件是這樣的：

dataInfo.jsp將包含頁眉，頁腳和內容

<body> 
<div id='headerDivDash'> 
    <h1 id='topHeaderDash'> 
     <!-- some image here --> 
    </h1> 
</div> 
<div id="vertical-list" style='display: block; list-style-type: none;'> 
    <ul class="resp-tabs-list"> 
     <a href="_blank"><li>Test 1</li></a> 
     <br /> 
     <a href="_blank"><li>Test 2</li></a> 
    </ul> 
</div> 

<div class="container"> 

</div> 
<div class="footer">Some Value Here</div> 
</body>

然後創建一個名爲「內容」什麼的另一個文件，把div容器容器標記在它

<c:forEach var="e" items="${testing.data}"> 
     <div class="component"> 
      <h3> 
       For 
       <c:out value="${e.key}" /> 
      </h3> 
      <table id="tabDes" style=''> 
       <thead> 
        <tr> 
         <th>Machine Name</th> 
         <th>Fresh 95</th> 
        </tr> 
       </thead> 
       <tbody> 
        <c:forEach var="m" items="${e.value}"> 
         <tr> 
          <th>${m.machines}</th> 
          <td class="color-changer">${m.Fresh 95}</td> 
         </tr> 
        </c:forEach> 
       </tbody> 
      </table> 
     </div> 
    </c:forEach>

然後在您的jQuery獲取內容文件

<script type="text/javascript"> 
$(document).ready(function(){ 
    var auto_refresh = setInterval(
    function() 
    { 
    $('.container').html(''); 
    $('.container').load('yourcontentfile').fadeIn("slow"); 
    }, 30 * 1000); 

});

來源

2014-03-12 19:13:24 user2782001

如何避免使用jQuery每x秒重新加載一個特定的「div」時附加其他「div's」？

回答

相關問題