Question

我想在我的一个JSF应用程序页面中使用jquery循环。我包括jquery形式谷歌和我在我的本地主机上托管jquery.cycle.all.js文件，我有另一个额外的js文件，其中包含我的jquery循环幻灯片脚本，我分别在我的页面中包含这些文件。但幻灯片显示不起作用。下面我包含了firebug错误和我的代码：

我的xhtml页面：

<h:form>
                                        <div>
                                            <div id="view-slider" class="pics">
                                                <img src="#{request.contextPath}/resources/images/1.jpg" width="400" height="200"/> 
                                                <img src="#{request.contextPath}/resources/images/2.jpg" width="400" height="200"/>  
                                            </div>
                                            <ul id="thumbnails"></ul>
                                        </div>
                                    </h:form>
                                    <br/>
                                    <p:separator/>
                                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
                                    <h:outputScript name="js/jquery-cycle-all.js"/>
                                    <h:outputScript name="js/view-slides.js"/>

视图-slides.js

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('activeLI')
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $(pager).each(function() {
        console.log(clsName + '; ' + currSlide ); 
        $(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
    });
};

$(function() {
    $('#view-slider').cycle({
        timeout: 3000,
        pager:  '#thumbnails',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
        }
    });
});

Firebug错误：

TypeError: $(...).cycle is not a function
view-slides.js.xhtml (line 17)

到目前为止，我已尝试以下方法但未成功：

将我的脚本包装在一个函数中。检查加载顺序，它应该是：jsf.js，jquery，jquery.cycle，view-slides.js 在一个简单的html文件中测试了这个脚本，它运行良好。

额外信息：我有一个模板，其中包含来自谷歌的相同版本的jquery.js文件，并有一个tabs.js脚本。这些也被加载，标签正在工作。我也将这些插入到我的html文件中，并且工作正常。我从我的xhtml文件中删除了jquery，因为我在模板中有它，它给了我jquery not found错误。

我不知道这是否是一个有冲突的问题，如果是这样，它与之有什么冲突？

感谢您的回复。

Answer 1

jQuery函数上的那些TypeError错误通常是由webapp加载的重复的不同版本化jQuery JS文件引起的。 PrimeFaces作为一个基于jQuery的JSF组件库已经自动加载jQuery。因此，您不需要通过<script> / <h:outputScript>在PrimeFaces之上手动加载另一个jQuery JS文件。如果删除它，则此错误应该消失。

如果您碰巧有一个页面，其中您想使用一些jQuery，但页面本身不使用任何PrimeFaces组件，因此不一定自动加载PrimeFaces捆绑的jQuery，那么您可以始终明确只需添加以下行即可自行加载：

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

这将显式加载PrimeFaces库捆绑的jQuery文件。注意：当target="head"已经在<h:head>内时，<h:body>可以省略。否则，例如，当在模板客户端的<ui:define>或{{1}}内时，它将自动重定位到head。另一个注意事项：您可以在一个实际需要PrimeFaces捆绑的jQuery的页面中安全地使用此行。它不会以重复的负载结束。

TypeError：$（...）。cycle不是一个函数：JSF应用程序中的jQuery循环

1 个答案: