運行JavaScript函數從PHP

之後，我使用document.getElementById("treeviewer").innerHTML = this.responseText;注入從PHP獲得的結果以向用戶顯示信息。

我注意到一個javascript功能不起作用表現出jstree代碼注入後，而且jstree函數運行前執行的innerHTML

的問題是，如何解決這個問題？也許我沒有正確調用JavaScript，調用函數的正確方法是什麼？我已經測試了使用javascript函數創建一個腳本元素（警告函數工作正常），我也使用eval（）作爲一些答案建議與任何好的結果。

jstree_charge.js jstree_charge.php 的

function jstree_charge(tech) { 
var index_project_database= document.getElementById("project_select").selectedIndex; 
var project_database= document.getElementById("project_select").options[index_project_database].value; 

if (tech == "") { 
    document.getElementById("treeviewer").innerHTML = ""; 
    return; 
} else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("treeviewer").innerHTML = this.responseText; 
      } 
    }; 

    xmlhttp.open("GET","../php/jstree_charge.php?tech=" + tech + "&project=" + project_database, true); 
    xmlhttp.send();  
} }

結果這是受innnerHTML在jstree_charge.js

<div name="treeviewer" id="treeviewer"> <ul> <li>RNC5 <ul> <li>00AB2_U <ul> <li>P00AB2A</li> <li>P00AB2B</li> <li>P00AB2C</li> <li>P00AB2D</li> <li>P00AB2E</li> </ul> </li> <li>00ABC <ul> <li>U00ABCA</li> <li>U00ABCB</li> <li>U00ABCC</li> </ul> </li> </ul> </li> </ul> </div>

jstree_charge.js
注入的結果
$(document).ready(function(){ $("#treeviewer").jstree({ "checkbox" : { "keep_selected_style" : false }, "plugins" : [ "checkbox" ] }); });

謝謝！

來源

2017-02-15 Beaver

兩個明顯的問題：1）您正在注入ID爲「treeviewer」的現有元素內的第二個ID爲「treeviewer」的元素。 ID必須是唯一的。 2）假設您所指的js函數是jstree_charge.js中的函數，那麼該函數僅在加載頁面時運行一次（這是document.ready（）包裝它的原因）。在下載新內容後，您必須再次運行jstree函數，否則它不知道新內容。 – ADyson

你是對的！ 1.行：document.getElementById（「treeviewer」）。innerHTML = this.responseText;確定它將被注入的地方，這就是爲什麼我引用id標籤。所以代碼被正確注入到指定的標籤中。 2.-腳本在頁面加載後運行，這就是爲什麼它沒有收取js文件的原因。如何在下載內容後運行jstree功能？ – Beaver

你需要做兩件事情：

1）你jsTree功能需要再次運行數據通過AJAX加載之後：

xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("treeviewer").innerHTML = this.responseText; 
     $("#treeviewer").jstree({ 
      "checkbox" : { 
       "keep_selected_style" : false 
      }, 
      "plugins" : [ "checkbox" ] 
     }); 
    } 
};

2）您需要稍微改變您的回覆。你說的回覆包括：

<div name="treeviewer" id="treeviewer">...</div>

但是，你已經在你的頁面中有這個元素 - 這是你注入新的響應文本的地方。「innerHTML」函數替換目標元素內的內容，而不是元素本身。因此，您將結束與這樣的佈局：

<div name="treeviewer" id="treeviewer"> 
    <div name="treeviewer" id="treeviewer"> 
    <ul>...etc</ul> 
    </div> 
</div>

這是無效的HTML - 你不能有相同ID的多個元素。它可能會導致jsTree函數不能按預期工作。

因此，您需要從jstree_charge.php生成的響應中刪除「treeviewer」div。

來源

2017-02-16 09:48:22 ADyson

謝謝！有用！問題解決了！ – Beaver

簡短的回答是：將你的jsTree功能設置innerHTML後運行，因此responseText準備：

xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("treeviewer").innerHTML = this.responseText; 
      $("#treeviewer").jstree({ 
       "checkbox" : { 
        "keep_selected_style" : false 
       }, 
       "plugins" : [ "checkbox" ] 
      }); 
     } 
};

和長答案就在這裏：How do I return the response from an asynchronous call?

來源

2017-02-15 20:25:35 dNitro

運行JavaScript函數從PHP

回答

相關問題