Question

我使用xmlhttp.send()获取在 PHP （jstree_view.php）中打印 HTML 分类列表（li ans lu标签）的查询结果。

之后，我使用document.getElementById("treeviewer").innerHTML = this.responseText;注入从 PHP 获得的结果，以向用户显示信息。

我注意到在注入代码之后，javascript函数无法显示jstree，而且jstree函数在执行 innerHTML 之前运行

问题是，如何解决这个问题？也许我没有正确调用javascript，调用该函数的正确方法是什么？我已经测试过使用javascript函数创建一个脚本元素（alert函数工作正常），我也使用了eval（）作为一些答案，建议任何好的结果。

jstree_charge.js

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();     
}  }

jstree_charge.php的结果 这是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" ]
    });
});

谢谢！

Answer 1

简短的回答是：在设置innerHTML后移动你的jsTree函数，以便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?

Answer 2

你需要做两件事：

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。

在PHP

2 个答案: