一旦div中的內容發生變化，在頁面中重新加載javascript

這就是我的應用程序的工作原理。一旦div中的內容發生變化，在頁面中重新加載javascript

我有一個導航欄，一旦我點擊欄中的鏈接，頁面（div）的一個特定部分將更改其內容（ajax）。大部分內容是圖形和表格，並使用CSS和JavaScript。問題是，只要點擊鏈接，js的效果就不會顯示/使用。我想，每當div的內容發生變化時，js都應該重新加載。我怎麼做？

這是腳本。

<script> 
    function loadTable(logtype) 
    { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      { 
       document.getElementById("tables").innerHTML=xmlhttp.responseText; 
       } 
     } 

     if (logtype == "XXX") 
     { 
      xmlhttp.open("GET","/con/chartUI",true); 
     } 

     xmlhttp.send(); 



    } 
</script>

HTML /導航部分（表是DIV應顯示NA圖表和圖形的id）

<div class="nav-collapse sidebar-nav"> 
          <ul class="nav nav-tabs nav-stacked main-menu"> 
           <li> 
            <a class="dropmenu" href="#"> <font color="#6666FF">System</font> </a> 
            <ul> 
             <li><a class="submenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Monitoring</h2></a></li> 
            </ul>  
           </li> 
           <li> 
            <a class="dropmenu" href="#"><font color="#6666FF">Maintenance</font></a> 
            <ul> 
             <li> 
              <a class="dropmenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Logs</h2></a> 
              <ul> 
               <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 1</h3></a></ul> 
               <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 2</h3></a></ul> 
               <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 3</h3></a></ul> 
               <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 4</h3></a></ul> 
              </ul> 
             </li> 
            </ul>  
           </li> 
          </ul> 
         </div>

來源

2013-12-18 srh snl

更新您的DIV內容後，您可以使用window.location.reload();。

編輯：

如果要更新使用Javascript/JQuery的（AJAX）的DIV內容，那麼無需重新加載頁面。我希望你的最終需求可能是更新DIV內容。

例：

$（「＃YOUR_DIV_ID」）HTML（「您的內容在這裏...」）。

來源

2013-12-18 04:34:56 KumarA

是的目標是更新div內容。但div的內容包含表格標籤，並且該表格需要來自導入的js文件的js函數。服務器的內容由於某種原因無法訪問這些js文件，我想知道爲什麼？我該如何解決它？ –

你可以添加/追加你的html元素的內容 – KumarA

這是能夠運行我需要一些js文件仍然不工作。你有任何其他建議或建議嗎？ –

如果你只是想在內容檢索使用後要調用一些JavaScript函數

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     // play with xmlhttp.responseText; 
     then call your javascript functions here 
    }}

來源

2013-12-18 02:49:34

由於您的div將通過Ajax調用進行更新。我認爲你可以在完成操作div內容後，在ajax調用的回調中重新加載JavaScript。

//reload script 
var script = document.querySelectorAll('script[src=blabla.js]')[0] 
script.parentNode.removeChild(script); 

script = document.createElement('script'); 
script.type='text/javascript'; 
script.src='blabla.js'; 

document.head.appendChild(script);

來源

2013-12-18 02:52:44 gee

此腳本是否刷新整個文檔？ –

我是對的，這段代碼所做的是，用腳本刪除所有標記，然後創建另一個與你刪除的腳本相同的腳本，然後將它追加到文檔中，對嗎？因爲我處理超過20個js標籤，林不知道這是否會有效。無論如何感謝:) –

它不會刪除所有的腳本文件，只是腳本文件的src是'blabla.js' – gee

您是否嘗試過使用console.log（）進行調試？這些請求是否實際發送（Chrome的網絡標籤對於監控這個有好處）？

我有點困惑你的代碼結構。 responseText只處理IE5和6，並且在請求發送之前嘗試執行此操作。這裏是來自MDN的an example usage。 reqListener回調是動作發生的地方。

function reqListener() { 
    console.log(this.responseText); 
} 

var oReq = new XMLHttpRequest(); 
oReq.onload = reqListener; 
oReq.open("get", "yourFile.txt", true); 
oReq.send();

除非IE5的支持是必不可少的，我建議你嘗試jQuery AJAX，它支持IE6 +。

來源

2013-12-18 02:56:37 Jimeux

使用本機javascript以這種方式調用ajax可以，在請求發送之前不會處理responseText。這不是程序流程，它檢查響應的狀態，然後使用responseText進行播放。參考http：// stackoverflow。com/questions/8567114/how-to-make-an-ajax-call-without-jquery –

你是指原始代碼？你可以看到它在這裏沒有響應：http://jsfiddle.net/Yh8j6/'responseText'應該在回調中處理，這可以通過將responseText代碼移出IE5/6塊並將其放入像上面MDN示例中的'onload'處理程序：http://jsfiddle.net/edzte/（應該顯示404錯誤）。 – Jimeux

我剛剛意識到你基本上發佈了上面的同樣的東西。我認爲這個問題應該很容易用你的答案解決，所以我提出了這個問題。 – Jimeux

一旦div中的內容發生變化，在頁面中重新加載javascript

回答

相關問題