I have written this code
<a4j:ajax event="valueChange" render="second,third" immediate="true" />
I want to display a progreess bar or 'Loading...' image while we are getting the response from server.
Is there a component availble that will allow us to do this?
A component already exists within the a4j library. Use the <a4j:status> component. Say you're loader (animated gif) is called ai.gif, then your code would look like this.
<a4j:status>
<f:facet name="start">
<h:graphicImage value="/images/ai.gif" alt="ai" />
</f:facet>
<f:facet name="stop">
<!-- no image; successfully loaded, or could display a checkmark or something -->
</f:facet>
</a4j:status>
See Also
RichFaces Showcase - Ajax Output/Containers
RichFaces Dev Guide - JBoss
Related
I have a strange behaviour in my code that for some reason I'm unable to solve.
I'm using PF4 and mojarra 2.1.28 running on jboss eap 6.4.
Here's the code
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="checkAll" value="#{backingBean.allowAll}">
<p:ajax listener="#{backingBean.confirmAllowAlla}" process="tablaDoc" update="tablaDoc :form1:facesMessages" onstart="mask();" oncomplete="unmask();" />
</p:selectBooleanCheckbox>
<p:outputLabel for="checkAll" value="Allow all" />
</f:facet>
<p:selectBooleanCheckbox id="checkTipo" value="#{tipoDocumento.allowed}" >
<f:param name="idTipoDocumento" value="#{tipoDocumento.idTipoDocumento}"/>
<f:param name="secuencia" value="#{tipoDocumento.secuencia}"/>
<p:ajax listener="#{backingBean.confirmChange(tipoDocumento)}" process="#this" update="tablaDoc :form1:facesMessages" onstart="mask();" oncomplete="unmask();" />
</p:selectBooleanCheckbox>
</p:column>
Getters and setters exist, backing bean is invoked as it should... apparently everything works but...
when I click in the booleanCheckbox placed in the header all the other checkboxes should be checked.
First time I click internally everything seems to go ok. Model is updated correctly and my datatable is updated accordingly but for the checks. Visually they are not checked (checked="checked" is missing in the output html) but all the expected behaviour is just fine. A button for each row is enabled/disabled and even if I add a column to display the internal value used for the check it renders the expected value.
If I uncheck the main checkbox and check it again, normal behaviour is restored and the checks for each row start rendering ok (checked="checked is in the output html).
I cannot modify my DTOs so I cannot implement SelectableDataModel from PrimeFaces.
Any ideas?
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.
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.
I know that this question may be similar to this one but I didn't understand the answer at all.
I am using a full page layout, in the left layout I have some nested accordion panels, tabs and command links. I want this links to update center layout content form.
Left Layout:
<h:form>
<p:accordionPanel>
<p:tab title="Parent Tab">
<p:accordionPanel>
<p:tab title="Child Tab">
<p:commandLink value="link" update=":contentform" />
</p:tab>
</p:accordionPanel>
</p:tab>
</p:accordionPanel>
</h:form>
Center Layout:
<h:form id="contentform">
<ui:include src="#{layoutUI.viewId}" />
</h:form>
And a simple explanation will help cause the similar question lacks in that :(
The proper use of the built in Ajax functionality of the p:commandLink component is to specify that the link will invoke an Ajax call with the ajax attribute.
<p:commandLink value="link" ajax="true" update=":contentform" />
Using the : in front will signify that you are looking for the ID of a component on the ViewRoot rather than its direct Naming Container so this is correct. The only thing missing is the ajax attribute.
I'm developing a web application with JSF 2.0 (mojarra) + primefaces. In the past I successfully used the [c:set] tag of jstl library to store some temporary data or output form other tags.
In my current case I want to use that again but it doesn't work properly and I have no idea why. In the follow example it works but particularly. Why does the case 2 not work properly?
<h:form id="userAdministration">
<p:messages id="messages" showDetail="true" />
<p:dataTable id="userTable" selectionMode="single" var="user" value="#{users}">
<p:column>
<f:facet name="header">
<h:outputText value="#{message.user_table_header_id_column}" />
</f:facet>
<h:outputText value="#{user.id}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{message.global_table_header_action_column}" />
</f:facet>
<p:commandButton type="push" onclick="#{user.loginname}DeleteConfirmation.show()" value="#{message.global_table_action_delete}" image="ui-icon-trash">
<f:setPropertyActionListener value="#{user}" target="#{userAdministrationController.selectedUser}" />
</p:commandButton>
<!-- 1. WORKS FINE, STORED VALUE IS "loginname" -->
<c:set var="deleteConfirmationMessage" value="#{user.loginname}"></c:set>
<!-- 2. VALUE IS "!!!" AND NOT "loginname !!!" -->
<c:set var="deleteConfirmationMessage2">
<h:outputText value="#{user.loginname}" />!!!
</c:set>
<!-- 3. WORKS FINE (OUTPUT "loginname") -->
<h:outputText value="#{user.loginname}" />
<p:confirmDialog message="#{deleteConfirmationMessage}" header="#{message.user_dialog_delete_confirmation_title}" severity="alert" widgetVar="#{user.loginname}DeleteConfirmation">
<p:commandButton value="#{message.user_dialog_delete_confirmation_no}" onclick="#{user.loginname}DeleteConfirmation.hide()" update="#form" type="button" />
</p:confirmDialog>
</p:column>
Why does the case 2 not work properly?
<!-- 2. VALUE IS "!!!" AND NOT "loginname !!!" -->
<c:set var="deleteConfirmationMessage2">
<h:outputText value="#{user.loginname}" />!!!
</c:set>
That's because taghandlers and UI components doesn't run at the same time. JSTL tags are taghandlers and they run during building the view (when the XHTML file is converted to JSF component tree). JSF <h:xxx> tags are UI components and they run during rendering the view (when the JSF component tree is converted/rendered to HTML code). See also JSTL in JSF2 Facelets... makes sense?
So, when the <c:set> runs, the <h:outputText> hasn't run at all.
But in this particular construct you actually don't need the <h:outputText> at all. Apart from setting it as value of <c:set>, you could also just inline the EL expression raw in the template text (note that this works when using JSF with Facelets, not when using JSF with JSP; given the fact that you're using PrimeFaces, you're definitely using Facelets as PrimeFaces doesn't have a JSP taglib at all).
<c:set var="deleteConfirmationMessage2">
#{user.loginname}!!!
</c:set>
or perhaps you weren't aware that you can mix EL and plain strings in an attribute like
<c:set var="deleteConfirmationMessage2" value="#{user.loginname}!!!" />
or
<p:confirmDialog message="#{user.loginname}!!!">
Depending on the concrete functional requirement, which isn't exactly clear from the question, a different alternative may be to use the <o:cache> component of OmniFaces. This may be more useful if you intend to cache the value for a broader scope than just the page/request scope like as in your <c:set> examples.
Just making an educated guess, because I haven't tried to combine JSF and JSTL, but I believe the c:set would be handled before the h:outputText is rendered, so it would only see the static text in its body. I'm not sure what order tag handlers are called in relation to the JSF lifecycle but putting in some logging would clear that up.
xmlns:c="http://java.sun.com/jstl/core"
just add this as taglib for jstl