javascripteclipsejsf-2primefacescolorbox

Primefaces JS Inserted before other resources causing error


I'm using JSF2.0 and Eclipse Indigo, and just recently I added the PrimeFaces library to my build path. Before this I had a "lightbox" working by using jquery1.7.2 + colorbox. I had the following includes:

<h:outputStylesheet library="css" name="style.css" type="text/css"/>  
<h:outputStylesheet library="css" name="colorbox.css" type="text/css"/>        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<h:outputScript library="js" name="jquery.colorbox.js" target="head"/>

The resources are located in WebContent/resources/js.

After adding PrimeFaces my "lightbox" no longer worked, because the colorbox function was not found. After looking at the source that JSF2 was generating, I noticed that the library inserted it's own version of jQuery above my jquery.colorbox.js so that the colorbox library couldn't use the jQuery library. Furthermore, the jquery.colorbox.js include was missing.

How do I relocate the PrimeFaces JavaScript libraries to a different location on the page? How come my jquery.colorbox.js isn't loading as it was previously?

My actual page might be useful. It is here.

I still get the same error from the JavaScript console in Chrome. I get this when the page loads:

Uncaught ReferenceError: jQuery is not defined

And the following when I click my colorbox link:

Uncaught TypeError: Object [object Object] has no method 'colorbox'
(anonymous function):8080/g5.ambience/:24
b.event.dispatchjquery.js.html:16
b.event.add.bD.handle.bB

Even with Daniels suggestions, here is the source that is produced: http://pastie.org/3851179


Solution

  • 1) try using primefaces bundled jquery (3.2 version uses the 1.7.1 jQuery)

    replace the

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
    

    with

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

    EDIT

    2) another option is to load your jQuery and the colorbox plugin before the loading of the primefaces bundled jQuery (not tested and not even sure that it will work , so it's not recommended :) )

    <f:facet name="first">
        <h:outputScript library="primefaces" name="jquery/jquery.js"/>
        <h:outputScript target="head">
            $ = jQuery;
        </h:outputScript>
    </f:facet>
    <h:outputScript library="js" name="jquery.colorbox.js" target="head"/>