Question

我在HTML页面中有一个没有任何探针的工作代码，但是当我在JSF页面中写它时它不起作用而且我不知道为什么因为代码相似而且我没有看到区别。你知道是什么让jsf代码像HTML一样工作吗？

在这里，您将拥有代码HTML和JSF

HTML CODE：

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

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

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

Javascript代码在HTML上工作，并且在JSF中不起作用

1 个答案: