非加载 PrimeFaces 组件 [重复]答案

【问题标题】：Non-loading PrimeFaces component [duplicate]非加载 PrimeFaces 组件 [重复]
【发布时间】：2016-04-07 09:05:09
【问题描述】：

我是一名 JavaEE/JSF 初学者，想在免费提供的 Dashboard/Bootstrap 主题中加载 PrimeFaces 组件：http://www.creative-tim.com/product/light-bootstrap-dashboard

有些正在加载（按钮），有些没有（例如图表）。我要加载动画图表：http://www.primefaces.org/showcase/ui/chart/animate.xhtml（其实就是这个例子）

组件在空白页面上完全加载：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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:p="http://primefaces.org/ui">
<h:head>
</h:head>

<h:body>
    <p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" />
</h:body>
</html>

但是，它没有加载完整的设计：

<div class="row">
     <div class="col-md-4">
         <div class="card">
             <p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" />
         </div>
      </div>

     <div class="col-md-8">
         <div class="card">
         </div>
     </div>
 </div>

这是“卡片”的 CSS：

.card {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1);
  background-color: #FFFFFF;
  margin-bottom: 30px;
}
.card .image {
  width: 100%;
  overflow: hidden;
  height: 260px;
  border-radius: 4px 4px 0 0;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card .image img {
  width: 100%;
}
.card .filter {
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.68);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
}
.card .filter .btn {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.card:hover .filter {
  opacity: 1;
  filter: alpha(opacity=100);
}
.card .btn-hover {
  opacity: 0;
  filter: alpha(opacity=0);
}
.card:hover .btn-hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.card .content {
  padding: 15px 15px 10px 15px;
}
.card .header {
  padding: 15px 15px 0;
}
.card .category,
.card label {
  font-size: 14px;
  font-weight: 400;
  color: #9A9A9A;
  margin-bottom: 0px;
}
.card .category i,
.card label i {
  font-size: 16px;
}
.card label {
  font-size: 12px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.card .title {
  margin: 0;
  color: #333333;
  font-weight: 300;
}
.card .avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}
.card .description {
  font-size: 14px;
  color: #333;
}
.card .footer {
  padding: 0;
  background-color: transparent;
  line-height: 30px;
}
.card .footer .legend {
  padding: 5px 0;
}
.card .footer hr {
  margin-top: 5px;
  margin-bottom: 5px;
}
.card .stats {
  color: #a9a9a9;
}
.card .footer div {
  display: inline-block;
}
.card .author {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.card .author i {
  font-size: 14px;
}
.card h6 {
  font-size: 12px;
  margin: 0;
}
.card.card-separator:after {
  height: 100%;
  right: -15px;
  top: 0;
  width: 1px;
  background-color: #DDDDDD;
  content: "";
  position: absolute;
}
.card .ct-chart {
  margin: 30px 0 30px;
  height: 245px;
}
.card .table tbody td:first-child,
.card .table thead th:first-child {
  padding-left: 15px;
}
.card .table tbody td:last-child,
.card .table thead th:last-child {
  padding-right: 15px;
}
.card .alert {
  border-radius: 4px;
  position: relative;
}
.card .alert.alert-with-icon {
  padding-left: 65px;
}

我真的不明白为什么生成的 Javascript 无法执行（或者它可能被设计隐藏了？），有人知道吗？或者这需要额外的细节吗？谢谢

编辑：乔纳森·克雷古特成功了！

【问题讨论】：

开始剥离你的 css ......一次一行，看看它什么时候变得可见
下次在浏览器中按 F12 获取线索。

标签： twitter-bootstrap jsf primefaces

【解决方案1】：

检查模板中其他地方是否没有加载 jQuery。 Primefaces 也会加载它的 jQuery 版本，但它通常最终什么都不显示。

【讨论】：