Javascript代码在HTML上工作，不会'；我不能在JSF中工作_Javascript_Html_Jsf_Jsf 2

Javascript代码在HTML上工作，不会'；我不能在JSF中工作

javascript html jsf jsf-2

Javascript代码在HTML上工作，不会'；我不能在JSF中工作,javascript,html,jsf,jsf-2,Javascript,Html,Jsf,Jsf 2,我在HTML页面中有一个工作代码，没有任何问题，但是当我在JSF页面中编写它时，它不工作，我不知道为什么，因为代码是相似的，我看不到区别。你知道什么使jsf代码不像HTML那样工作吗这里有HTML和JSF代码 HTML代码： <!DOCTYPE html> <html> <head> <title>OrgChart | Performance 2000 nodes</title> <script src="./

我在HTML页面中有一个工作代码，没有任何问题，但是当我在JSF页面中编写它时，它不工作，我不知道为什么，因为代码是相似的，我看不到区别。你知道什么使jsf代码不像HTML那样工作吗

这里有HTML和JSF代码

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>OrgChart | Performance 2000 nodes</title>

    <script src="./getorgchart.js"></script>
    <link href="./getorgchart.css" rel="stylesheet" />


    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #people {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="people"></div>

    <script type="text/javascript">
    var source = [];
    source.push({ id: 1, parentId: null, nodeId: "id: 1", title: "title: 1", other: "root" });
    var i = 1;
    while (i < 1000){
        addChildren(i)
        i = i + 1;
    }

    function addChildren(i){
        var lastId = source[source.length - 1].id;
        source.push({ id: lastId + 1, parentId: i, nodeId: "id: " + (lastId + 1), title: "title: " + (lastId + 1) });
        source.push({ id: lastId + 2, parentId: i, nodeId: "id: " + (lastId + 2), title: "title: " + (lastId + 2) });
    }


    var orgChart = new getOrgChart(document.getElementById("people"),{
        theme: "annabel",
        linkType: "B",
        primaryFields: ["nodeId", "title", "other"],
        photoFields: ["image"],
        gridView: true,
        enableSearch: false,
        dataSource: source
    });
    </script>   
</body>
</html>


OrgChart |性能2000节点
html，正文{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#人{
宽度：100%；
身高：100%；
}
var源=[]；
push（{id:1，parentId:null，nodeId:“id:1”，title:“title:1”，other:“root”}）；
var i=1；
而（i<1000）{
儿童（一）
i=i+1；
}
儿童功能（一）{
var lastId=source[source.length-1].id；
push（{id:lastId+1，parentId:i，nodeId:“id:”+（lastId+1），title:“title:”+（lastId+1）}）；
push（{id:lastId+2，parentId:i，nodeId:“id:”+（lastId+2），title:“title:”+（lastId+2）}）；
}
var orgChart=new getOrgChart（document.getElementById（“人”）{
主题：“安娜贝尔”，
链接类型：“B”，
主字段：[“节点ID”、“标题”、“其他”]，
光域：[“图像”]，
gridView：没错，
启用搜索：false，
数据源：源
});

JSF代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <f:view contentType="text/html">  
        <h:head>
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />

            <f:facet name="first">  
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Title</title> 
            </f:facet>

    <script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
    <link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />

        </h:head>


 <h:body style="margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;">  

                   <h:form >  

                    <div id="people" style="width: 100%;height: 100%;"></div>

                    <script type="text/javascript">
                     <![CDATA[ 
                         var source = [];
                    source.push({ id: 1, parentId: null, nodeId: "id: 1", title: "title: 1", other: "root" });
                    var i = 1;
                    while (i < 1000){
                        addChildren(i)
                        i = i + 1;
                    }

                    function addChildren(i){
                        var lastId = source[source.length - 1].id;
                        source.push({ id: lastId + 1, parentId: i, nodeId: "id: " + (lastId + 1), title: "title: " + (lastId + 1) });
                        source.push({ id: lastId + 2, parentId: i, nodeId: "id: " + (lastId + 2), title: "title: " + (lastId + 2) });
                    }


                    var orgChart = new getOrgChart(document.getElementById("people"),{
                        theme: "annabel",
                        linkType: "B",
                        primaryFields: ["nodeId", "title", "other"],
                        photoFields: ["image"],
                        gridView: true,
                        enableSearch: false,
                        dataSource: source
                    });
                ]]>
    </script>

 </h:form>
        </h:body>
    </f:view>
</html>


标题

谢谢，我使用浏览器控制台遵照@Kukeltje的建议，这是修改后的工作代码：

我将

更改为//
我将document.getElementById（“Idform:people”）
更改为document.getElementById（“people”）


标题
//
请定义“不工作”。您很可能在浏览器控制台中出错！！！如果你确实发布了一个答案，即使它是一个副本，发布你改变了什么以及为什么。我怀疑你的变化是好的。就我所知，它仍然应该投票。。。这是不对的。您原来的问题中已经有了document.getElementById（“人”）！我看到在答案中表格有一个id，而在最初的问题中它没有。请注意创造好的答案
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <f:view contentType="text/html">  
        <h:head>
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />

            <f:facet name="first">  
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Title</title> 
            </f:facet>

    <script src="./getorgchart.js"> </script>
    <link href="./getorgchart.css" rel="stylesheet" />

        </h:head>


 <h:body style="margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;">  

                   <h:form id="formId">  

                    <div id="people" style="width: 100%;height: 100%;" ></div>

                    <script type="text/javascript">
                     //<![CDATA[

                         var source = [];
                    source.push({ id: 1, parentId: null, nodeId: "id: 1", title: "title: 1", other: "root" });
                    var i = 1;
                    while (i < 1000){
                        addChildren(i)
                        i = i + 1;
                    }

                    function addChildren(i){
                        var lastId = source[source.length - 1].id;
                        source.push({ id: lastId + 1, parentId: i, nodeId: "id: " + (lastId + 1), title: "title: " + (lastId + 1) });
                        source.push({ id: lastId + 2, parentId: i, nodeId: "id: " + (lastId + 2), title: "title: " + (lastId + 2) });
                    }


                    var orgChart = new getOrgChart(document.getElementById("people"),{
                        theme: "annabel",
                        linkType: "B",
                        primaryFields: ["nodeId", "title", "other"],
                        photoFields: ["image"],
                        gridView: true,
                        enableSearch: false,
                        dataSource: source
                    });

                //]]>
    </script>

 </h:form>
        </h:body>
    </f:view>
</html>