Javascript代碼在HTML工作，並在JSF中不起作用

-1

我有一個HTML頁面中的工作代碼沒有任何探針，但是當我寫在JSF頁面它不工作，我不知道爲什麼，因爲代碼是相似，我沒有看到區別。你知道什麼使jsf代碼不像HTML一樣工作？Javascript代碼在HTML工作，並在JSF中不起作用

在這裏，您將有兩個代碼的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 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>

來源

2017-01-09 osselosse

請界定「_doesn't WORK_」。 – Teemu

您很可能在瀏覽器控制檯中出現錯誤！ – Kukeltje

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

來源

2017-01-09 11:31:32 osselosse

如果你發佈了一個答案，即使它是一個重複，發佈**你改變了什麼以及爲什麼。我懷疑你的改變是好的。據我所知，它應該仍然失敗 – Kukeltje

Downvote ...這是不正確的。你原來的問題已經有了'document.getElementById（「people」）'！我看到答案中的表格有一個id，在原來的問題中沒有。請注意創建好的答案 – Kukeltje

Javascript代碼在HTML工作，並在JSF中不起作用

回答

相關問題