2017-01-09 8 views
-1

У меня есть рабочий код на HTML-странице без каких-либо проб, но когда я пишу его на странице JSF, он не работает, и я не знаю, почему, потому что коды похоже, и я не вижу разницы. вы знаете, что делает код jsf не работает, как HTML?Javascript Code работает над 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 КОД:

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

Уточнитните "_doesn't work_". – Teemu

+1

У вас скорее всего есть ошибки в консоли браузера !!! – Kukeltje

ответ

-1

Спасибо я последовал совету @Kukeltje с помощью консоли браузера и это рабочий код после модификации:

i изменен <![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> 
+0

ЕСЛИ вы отправляете ответ, даже если это дубликат, сообщение **, что ** вы изменили и почему. И я сомневаюсь, что ваши изменения хороши. Насколько я вижу, он все равно должен потерпеть неудачу – Kukeltje

+0

Downvote ... Это неверно. У вас уже был 'document.getElementById (« people »)' в вашем исходном вопросе! И я вижу, что в ответе форма имеет идентификатор, а в исходном вопросе это не так. Будьте внимательны при создании хороших ответов – Kukeltje