Primefaces: ProgressBar doesn't render with mobile render kit

Question

When I tried to render an p:progressBar in a site with mobile render kit enabled, the component didn't render (I see my own css styling of the component though).
I simply get two 404s in my browser's error console:

404 (Not Found) (undefined.css.xhtml, line 0) $HOSTADRESS$/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.1
404 (Not Found) (undefined.js.xhtml, line 0) $HOSTADRESS$/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.1

I'm sure this is a bug and I will open an issue (Issue 7717). I just wanted to display a static progress bar, is there a simple workaround for this use case? Btw. I'm using PrimeFaces 5.1

Here's a SSCCE:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pm="http://primefaces.org/mobile">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<f:view locale="de_DE" encoding="UTF-8" contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
    <h:body>
        <p:commandButton value="Renders"/>
<!--doesn't render-->
        <p:progressBar value="#{70}" labelTemplate="#{70}"/>
    </h:body>
</f:view>
</html>

how can this be a duplicate if it was asked 1,5 months before the suspected duplicate? — Zhedar, Feb 28 '15 at 17:14

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Today I tackled this old problem again and found a workaround in this answer.
So I added

<h:outputScript target="body">
    var originalPrimeFacesCw = PrimeFaces.cw;
    PrimeFaces.cw = function(name, id, options, resource) {
        resource = resource || name.toLowerCase();
        originalPrimeFacesCw.apply(this, [name, id, options, resource]);
    };
</h:outputScript>

to my mobile template and set the progressbar's background color via css:

.ui-progressbar .ui-widget-header {
    background-color: SOMECOLOR; 
}

At first I used <o:onloadScript> to load the workaround script, but this get's get on every ajax request and thus results in a RangeError if you're doing some of these on your page.

I still hope for an official fix though.

Primefaces: ProgressBar doesn't render with mobile render kit

1 Answers1