JSF won't load everything at the same time

Question

In my JSF application if I refresh the page everything get's rendered exceted the primeface graphicimages and jsf <f:ajax /> isn't working. If I wait 5 seconds the ajax calls are working again and graphicimages are getting loaded.

Another example is when I upload an image. The image get procced, uploaded and the site get's refreshed. After this the image is displayed, but ajax calls won't work after a few seconds after.

The app runs on a JBoss 7.1 with JSF 2.1

Is this a problem with slow hardware or something else. I would be happy with any hints because I don't really know where to look for a solution.

Example:

<p:selectOneRadio id="options" value="#{gameWriter.uploadCover}">
     <f:selectItem itemLabel="ja" itemValue="true"/>
     <f:selectItem itemLabel="nein" itemValue="false"/>
     <f:ajax/>
</p:selectOneRadio>

Answer 1

When you define the f:ajax, try to give the UI components you want to execute and update. Also give the event. If you want process the whole form and update the whole page, you can use @form and @all in the f:ajax.

An example with @form and @all with f:ajax is as follows.

<h:form>
    <p:selectOneMenu  id="cmb" value="#{investigationItemController.current}" >
        <f:selectItem itemLabel="Please select an item" />
        <f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
        <f:ajax event="change" execute="@form" render="@all"/>
    </p:selectOneMenu>
    <h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>

An example with primefaces ajax command is as follows.

<h:form>
    <p:selectOneMenu  id="cmb" value="#{investigationItemController.current}" >
        <f:selectItem itemLabel="Please select an item" />
        <f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
        <p:ajax event="change" process="cmb" update="lbl"/>
    </p:selectOneMenu>
    <h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>

We can add more than one or for one UI Component if we want to execute the logic for more than one event.

Events for standard JSF UI component can be taken after removing the 'on' from the list of attributes of the UI component starting with 'on'. For example if JSF UI support onChange as an attribute you can use event="change". For primefaces UI components, the possible events are listed under Primefaces documentation. It is essential to correctly select the event in order for a successful ajax response.