JSF won't load everything at the same time - ajax

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>

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.

Related

show and hide primefaces tab via ajax depending on selectOneMenu's values - Hide a tab without update the tabview

I have a problem with p:tab. I googled a lot, but found nothing about this issue.
I need to show/Hide a tab within a tabView based on selection of a selectOneMenu value. So, I have used ajax but the problem is that when I change the value of selectOneMenu all form inputs are reset and values are lost.
<p:tab id="informationTab">
<h:outputLabel for="situationFamiliale" value="Situation familiale: *" />
<p:selectOneMenu id="situationFamiliale" value="#{bean.entity.attribut}" >
<f:selectItem itemLabel="Celibataire" itemValue="Celibataire" />
<f:selectItem itemLabel="Marie(e)" itemValue="Marie(e)" />
<f:ajax event="change" render="#form" />
</p:selectOneMenu>
</p:tab>
<p:tab id="id" rendered="#{bean.entity.attribut== 'Marie(e)'}" title="Information Menage">
</p:tab>
If you use <f:ajax without execute=, the default for executeis '#this'. Therefore only the value of the SelectOneMenu is sent to the server. Because of render="#form" the whole form will be rerendered and all other changes are lost.
You should use f:ajax execute="#form" render="#form"...>. The problem is, you have to rerender the whole tabview if you want to appear/disappear a tab. You can't rerender a single tab with a rendered attribut.

selectOneButton cant submit while inside splitButton

I'm using JSF 2 along with primefaces 5.1, i have a selectOneButton which have 2 values,
EN/FR, i want to be notified each time the language is changed, and then change the locale of the page.
Now the problem is that this selectOneButton is inside a splitButton, and for some reason,
the ajax submit of the "change" event is always returning null for the selectOneButton, and it never passes the values selected.
<h:form prependId="false" id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="langs" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Françcais" itemValue="fr"/>
<f:ajax event="change"/>
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
this just for testing:
public void setLang(String lang) {
System.out.println("Changed: " + lang);
this.lang = lang;
}
when i put the selectOneButton inside a p:menu for examples it works just fine.
This problem is two-fold.
First, most PrimeFaces components, particularly the ones which generate hidden HTML input elements and are presented to enduser by a bunch of divs/lists with click listeners instead of as "plain HTML" inputs, require a <p:ajax> instead of <f:ajax> to be properly processed during ajax submits.
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
Note that I omitted the event attribute as it has the right default value already, which would be valueChange in case of inputs and action in case of commands. The value of change is not necessarily the right default as some components would require click instead, particularly radiobuttons and checkboxes which have a fixed value.
In any case, the general recommendation is, if you're using PrimeFaces, just stick to <p:ajax> all the time. It'll use PrimeFaces-specific jQuery based Ajax API to process the ajax request instead of JSF native Ajax API and it's capable of dealing with PrimeFaces components.
Second, the JavaScript code associated with <p:splitButton> moves the HTML representation of the menu to end of body (in order to ensure best cross browser compatibility as to z-index). This however causes the menu to not be sitting in a form anymore. You can confirm it by looking at the HTML DOM tree in the webbrowser via rightclick and Inspect Element (not View Source!). You can solve this in basically 2 ways:
Move the form to inside the menu item. It wouldn't make sense anyway to submit all other menu items for this specific requirement.
<p:splitButton>
<p:menuitem>
<h:form id="languageForm">
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
</h:form>
</p:menuitem>
</p:splitButton>
Use <p:ajax partialSubmit="true"> to let PrimeFaces Ajax API to collect the invidivual input values instead of searching for a <form> and serializing it (which would fail because there's no form).
<h:form id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax partialSubmit="true" />
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
</h:form>

JSF selectOneMenu valud change not updating other fields ajax

on valuechange event of select one menu component, i can see the changes applied to the model / java, but i dont see changes applied to input components on page.
when i do a F5, i see the changes but other data input by user gets lost.
i want to do a refresh without user loosing his data entered which is not submitted yet.
how can this be achieved using jsf ajax.
i am calling java code using f:valueChangeListener. for ajax i am using a4j:ajax
<h:selectOneMenu rendered="" value="" immediate="true">
<f:selectItems value="" />
<a4j:ajax event="change" execute="#this" render="#form" />
<f:valueChangeListener binding="" />
</h:selectOneMenu>

How to re-render <p:panel> from <p:selectOneRadio> option when form fails a validation?

Render works fine during initial load of the page, but once the form has been submitted and some component failed a validation re-render does not trigger, the panel does not show and hide anymore and page must be refreshed again. I'm still new with jsf.
Sample Code
<p:selectOneRadio id="accommodationOptions" value="#{travelRequestMBean.accommodationOptions}">
<f:selectItem itemLabel="#{field['accord3Radio2']}" itemValue="2" />
<f:selectItem itemLabel="#{field['accord3Radio1']}" itemValue="1" />
<f:ajax render="panelMoreAccommodation2"/>
</p:selectOneRadio>
<p:panel id="panelMoreAccommodation2" widgetVar="panelMoreAccommodation2"
visible="#{travelRequestMBean.accommodationOptions == 1}" closable="true" toggleable="true">
<p:graphicImage url="/images/hotel-noun_project_4398.svg" alt="#{field['accord3Label2']}" height="24px" />
<h:outputText value="#{field['accord3Label2']}" />
</p:panel>
Also I have tried the other variant of this using a boolean attribute in the backing bean with an ajax event on the selectoneradio, result was still the same and panel does not do anything.
I can't see where you validate your inputs. But take a look at http://www.primefaces.org/showcase/ui/csv/basic.xhtml with the combination of
update=":panelMoreAccommodation2"
And instead of visible use render.
Finally having some tweaks, the problem was this attribute on the target panel
closable="true"
After removing this attribute the ajax update worked again even after a submit with a failed validation.

Ajax, conditional rendering and backing beans

I am trying to display a page where the user, by the appropriate selection using a radio button, sees either a textbox or a combo box. This is relatively easy and I managed to do that by the following code:
<h:selectOneRadio id="selection" value="#{inputMethod.choice}">
<f:selectItem itemValue="#{inputMethod.TEXT}" itemLabel="textbox"/>
<f:selectItem itemValue="#{inputMethod.COMBO}" itemLabel="combobox" />
<f:ajax event="click" execute="#this" render="#form" />
</h:selectOneRadio>
<h:panelGroup id="Textbox" rendered="#{inputMethod.choice==inputMethod.TEXT}">
<h:outputLabel>Textbox:</h:outputLabel>
<h:inputText value="#{myBean.somevalue}" />
</h:panelGroup>
<h:panelGroup id="Combobox" rendered="#{inputMethod.choice==inputMethod.COMBO}">
<h:outputLabel Combobox:/>
<h:selectManyListbox id="CommunityListbox" value="#{myBean.choices}">
<f:selectItems value="#{myBean.selections}" var="u" itemValue="#{u.id}" itemLabel="#{u.name}"/>
</h:selectManyListbox>
</h:panelGroup>
The problem I have is that the setter for the combo box is never called.
In fact, the setter is only called for the component that is rendered by default (in this case whenever inputMethod.choice==inputMethod.TEXT). If I remove the conditional rendering, all setters are called as one would expect.
Any ideas or answers will be greatly appreciated!
PS: I am using jsf2.0, Glassfish 3.1, Netbeans 7.0 (in case this is of any importance)
You need to ensure that #{inputMethod.choice} evaluates exactly the same during the request of processing the form submit as it did during the request of displaying the form. Easiest is to put the bean in the view scope or to move the initialization logic into the (post)constructor of the request scoped bean.

Resources