CombinedResourceHandler doesnt work with PrimeFaces or PF Extensions

Question

I will begin with an example, if I have 2 panels like this:

<h:panelGroup id="container">
  <!-- PANEL 1 -->
  <c:if test=#{bean.render1}>
    <ui:include ... />
  </c:if>

<!-- PANEL 2 -->
  <c:if test=#{bean.render2}>
    <ui:include ... />
  </c:if>
</h:panelGroup>

Panel 2 has a "p:fileupload" component, by default panel 1 is showed when the page is loaded, when I change to panel 2 an ajax request is sent to update the "container" but I get an exception due to this code:

createWidget : function(widgetConstructor, widgetVar, cfg, resource) { 
  if(PrimeFaces.widget[widgetConstructor]) {
    //...
  } else {
    var scriptURI = $('script[src*="/javax.faces.resource/primefaces.js"]').attr('src').replace('primefaces.js', resource + '/' + resource + '.js'),
        cssURI = $('link[href*="/javax.faces.resource/primefaces.css"]').attr('href').replace('primefaces.css', resource + '/' + resource + '.css'),
        cssResource = '<link type="text/css" rel="stylesheet" href="' + cssURI + '" />';
    //...
  }
}

How u could guess, some components (When I use c:if or with pe:ckEditor) load additional libraries without use the @ResourceDependency annotation, in that case I'll get an exception because the resource "primefaces.js" doesnt exists, was replaced by omnifaces.

Any suggestion to resolve this?

Answer 1

There are 3 options in order to solve this design problem:

1. Don't use ajax to navigate, instead use a normal (and bookmarkable and SEO friendly) request.

2. Don't use view build time tags for request based rendering (by ajax), instead use the rendered attribute.

3. Explicitly include the missing resource yourself using <h:outputScript>. E.g. for <p:fileUpload>:

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