TypeError:$(...).cycle不是一个函数:JSF应用程序中的jQuery循环

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

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

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

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

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