运行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

回答

相关问题