Javascript代码适用于HTML，不适用于JSF [重复]答案

【问题标题】：Javascript Code work on HTML and doesn't work in JSF [duplicate]Javascript代码适用于HTML，不适用于JSF [重复]
【发布时间】：2017-05-23 15:16:43
【问题描述】：

我在 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>

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>

【问题讨论】：

请定义“不起作用”。
你的浏览器控制台很可能有错误！！！

标签： javascript html jsf jsf-2

【解决方案1】：

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

我将<![CDATA[ 更改为//<![CDATA[

我把document.getElementById("Idform:people")改成了document.getElementById("people")

<!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>

【讨论】：

如果您确实发布了答案，即使它是重复的，请发布 what 您更改的内容以及原因。我怀疑你的改变是好的。据我所见，它仍然应该失败
投反对票...这是不正确的。您的原始问题中已经有document.getElementById("people")！我看到在答案中表单有一个 id 而在原始问题中它没有。请注意创建好的答案