-1
私はHTMLページに作業中のコードがありますが、これはどのような問題でもありませんが、JSFページで記述すると動作しません。同様と私は違いが表示されません。あなたはjsfコードがHTMLのように動作しないことを知っていますか？JavascriptコードはHTMLで動作し、JSFでは動作しません
<!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>
に
document.getElementById("Idform:people")を変更//<![CDATA[に "_doesn't work_" を定義してください。 – Teemuブラウザコンソールでエラーが発生している可能性が最も高いです！ – Kukeltje