1

我在使用带有 JSF 的 jqPlot 时遇到问题

我将此代码添加到我的 JSF 页面：

$(document).ready(function () {
  var s1 = [200, 600, 700, 1000];
  var s2 = [460, - 210, 690, 820];
  var s3 = [-260, - 440, 320, 200];
  var ticks = ['May', 'June', 'July', 'August'];
  var plot1 = $.jqplot('chart1', [s1, s2, s3], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        fillToZero: true
      }
    },
    series: [{
      label: 'Hotel'
    }, {
      label: 'Event Regristration'
    }, {
      label: 'Airfare'
    }],
    legend: {
      show: true,
      placement: 'outsideGrid'
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      },
      yaxis: {
        pad: 1.05,
        tickOptions: {
          formatString: '$%d'
        }
      }
    }
  });
});

但是当我尝试加载页面时出现此错误：

Uncaught TypeError: Cannot read property 'BarRenderer' of undefined
(anonymous function)portfolioModeling.xhtml:184
f.extend._Deferred.e.resolveWithjquery.min.js:2
e.extend.readyjquery.min.js:2
c.addEventListener.C

我添加了整个所需的 js 文件和 css 文件，但我迷路了，不知道问题出在哪里

提前致谢

4

4 回答 4

4

如果您使用的 JSF 组件库本身已经随 jQuery 一起提供，例如 PrimeFaces、RichFaces、ICEfaces 等，就会发生这种情况。

然后，您不应该包含另一个版本的 jQuery，这只会导致所有颜色的 JavaScript 错误。

如果您有一个 jQuery 插件和一个依赖于它的脚本，那么您应该将其添加为<h:outputScript target="head">内部<h:body>而不是<h:head>. 这样就可以保证在JSF组件库绑定jQuery之后加载。

<h:head>
    ...
</h:head>
<h:body>
    <h:outputScript name="js/jquery.jqplot.js" target="head" />
    <h:outputScript name="js/onload.js" target="head" />
    ...
</h:body>

然而，捆绑 jQuery 的 JSF 组件库可能仅在视图包含明确需要 jQuery 的组件时自动包含。如果视图不包含它，那么 jQuery 可能不会被自动包含，您的插件和脚本就会中断。如果您需要在每个视图中强制包含 jQuery，那么您需要<h:outputScript>在<h:head>.

目前尚不清楚您使用的是哪个组件库，但对于 PrimeFaces，它是

<h:head>
    ...
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript name="js/jquery.jqplot.js" />
    <h:outputScript name="js/onload.js" />
</h:head>
<h:body>
    ...
</h:body>

（然而，手动摆弄 jqPlot 会很奇怪，因为 PrimeFaces 已经提供了几个使用 jqPlot 的 JSF 组件）

在 RichFaces 4.x 的情况下，它是

<h:head>
    ...
    <h:outputScript name="jquery.js" />
    <h:outputScript name="js/jquery.jqplot.js" />
    <h:outputScript name="js/onload.js" />
</h:head>
<h:body>
    ...
</h:body>
于 2012-10-17T10:59:07.947 回答
0

当我通过包含一些未包含在我所遵循的教程中的基本脚本引用来解决相同的错误时，只是在这里发帖。

HTML 中标题部分缺少的行是（请注意，库位置 './lib...' 将根据本地安装路径而有所不同）：

<script language="javascript" type="text/javascript" src="./lib/dist/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/dist/jquery.jqplot.css">

希望这可以帮助某人，

詹姆士

于 2013-09-26T13:52:28.257 回答
0

我解决了问题

问题是我在头部包含了样式表和 js 文件，这给 jsf mvc 项目造成了一个大问题

于 2012-10-17T10:03:22.867 回答
-1

来自 JQuery 文件的问题，你需要调用 jquery.js

于 2014-03-20T08:43:51.167 回答