I am using JSF2.0 with Prime Faces 3.2. I have a data table with a column that has two command buttons. The second command button is rendered based on a condition. Everything works well until the data table is filtered. Once filtered the first command button without the rendered attribute calls my actionListener without any issues, whereas the second command button with the rendered attribute does not.
PS:The reason i am using f:param intead of setPropertyActionListener is because of a bug in primefaces datatable that passes the wrong row's id when filtered.
Here is my code, any insight into this issue would be great.
<p:column headerText="Column1" filterMatchMode="contains" filterBy="#{item.name}" sortBy="#{item.name}">
<h:outputText value="#{item.name}" style="float:left" />
<span class="inlineButton">
<p:commandButton id="selectBtn" icon="select"
oncomplete="dialog1.show()" actionListener="#{controller.setItem}">
<f:param name="itemId" value="#{item.id}"/>
</p:commandButton>
<p:commandButton id="delBtn" icon="delete"
actionListener="#{controller.setItem}"
oncomplete="delConfirm.show()"
rendered="#{not empty item.id}">
<f:param name="itemId" value="#{item.id}"/>
</p:commandButton>
</span>
</p:column>
Related
I have created form and I want to show previous existing items on a table while a new one is creating. I'd like to show matching items as form is filling up. But when I try to filter the list without having the form completed, the validation messages appear and the table doesn't get updated.
Don't know if it's possible, but what I want to do something like this:
<h:form id="form">
<h:outputText value="Name: "/>
<p:inputText value="#{itemsBean.name}" id="name" required="true"/>
<br/>
<h:outputText value="Description: "/>
<p:inputText value="#{itemsBean.description}" id="description" required="true"/>
<p:commandButton value="Save" update="form" actionListener="#{itemsBean.save}"/> //validate and save
<p:commandButton value="Filter" update="form" actionListener="#{itemsBean.updateItemsList}"/> //don't validate, and update the table.
<p:dataTable id="list" value="#{itemsBean.itemsList}" var="item">
<p:column>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<h:outputText value="#{item.description}"/>
</p:column>
</p:dataTable>
</h:form>
I'm very new to JSF.
I understand that you want to filter based on the name input field. The <p:commandButton> sends by default an ajax request and has a process attribute wherein you can specify which components you'd like to process during the submit. In your particular case, you should then process only the name input field and the current button (so that its action will be invoked).
<p:commandButton process="#this name" ... />
The process attribute can take a space separated collection of (relative) client IDs of the components, wherein #this refers to the current component. It defaults in case of <p:commandButton> to #form (which covers all input fields of the current form and the pressed button), that's why they were all been validated in your initial attempt. In the above example, all other input fields won't be processed (and thus also not validated).
If you however intend to skip the required validation for all fields whenever the button in question is been pressed, so that you can eventually process multiple fields which doesn't necessarily need to be all filled in, then you need to make the required="true" a conditional instead which checks if the button is been pressed or not. For example, let it evaluate true only when the save button has been pressed:
<p:inputText ... required="#{not empty param[save.clientId]}" />
...
<p:inputText ... required="#{not empty param[save.clientId]}" />
...
<p:commandButton binding="#{save}" value="Save" ... />
This way it won't be validated as required="true" when a different button is pressed. The trick in the above example is that the name of the pressed button (which is essentially the client ID) is been sent as request parameter and that you could just check its presence in the request parameter map.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
I Have tested this with non-ajax submits:
<p:inputText ... required="#{not empty param.includeInSave1}" />
...
<p:inputText ... required="true" />
...
<p:commandButton value="Save1" ajax="false">
<f:param name="includeInSave1" value="true" />
</p:commandButton>
<p:commandButton value="Save2" ajax="false" />
The first input is required validated only on Save1 button submit.
Additionally to the BalusC answer (very useful and complete) I want to add that when you use a <h:commandButton /> it will validate (required, custom validations) all the fields in the <h:form /> where the command button is located, therefore when you need to use more than one command button you could consider that it is a good practice to use different <h:form /> to different responsibilities to avoid unexpected behavior in submit actions of the command buttons.
It is well explained in a BalusC answer: Multiple h:form in a JSF Page
If your form has validations and you do not update the <h:form /> or you do not show messages, you could get a headache thinking that the <h:commandButton /> is not firing your action, but likely is a validation problem that has not been shown.
Change your filter commandbutton like this to ignore validation:
<p:commandButton value="Filter" update="list" actionListener="#{itemsBean.updateItemsList}" process="#this"/>
EDIT:
The related post on SO, I think this will solve your issue too
JSF 2.0: How to skip JSR-303 bean validation?
I have created form and I want to show previous existing items on a table while a new one is creating. I'd like to show matching items as form is filling up. But when I try to filter the list without having the form completed, the validation messages appear and the table doesn't get updated.
Don't know if it's possible, but what I want to do something like this:
<h:form id="form">
<h:outputText value="Name: "/>
<p:inputText value="#{itemsBean.name}" id="name" required="true"/>
<br/>
<h:outputText value="Description: "/>
<p:inputText value="#{itemsBean.description}" id="description" required="true"/>
<p:commandButton value="Save" update="form" actionListener="#{itemsBean.save}"/> //validate and save
<p:commandButton value="Filter" update="form" actionListener="#{itemsBean.updateItemsList}"/> //don't validate, and update the table.
<p:dataTable id="list" value="#{itemsBean.itemsList}" var="item">
<p:column>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<h:outputText value="#{item.description}"/>
</p:column>
</p:dataTable>
</h:form>
I'm very new to JSF.
I understand that you want to filter based on the name input field. The <p:commandButton> sends by default an ajax request and has a process attribute wherein you can specify which components you'd like to process during the submit. In your particular case, you should then process only the name input field and the current button (so that its action will be invoked).
<p:commandButton process="#this name" ... />
The process attribute can take a space separated collection of (relative) client IDs of the components, wherein #this refers to the current component. It defaults in case of <p:commandButton> to #form (which covers all input fields of the current form and the pressed button), that's why they were all been validated in your initial attempt. In the above example, all other input fields won't be processed (and thus also not validated).
If you however intend to skip the required validation for all fields whenever the button in question is been pressed, so that you can eventually process multiple fields which doesn't necessarily need to be all filled in, then you need to make the required="true" a conditional instead which checks if the button is been pressed or not. For example, let it evaluate true only when the save button has been pressed:
<p:inputText ... required="#{not empty param[save.clientId]}" />
...
<p:inputText ... required="#{not empty param[save.clientId]}" />
...
<p:commandButton binding="#{save}" value="Save" ... />
This way it won't be validated as required="true" when a different button is pressed. The trick in the above example is that the name of the pressed button (which is essentially the client ID) is been sent as request parameter and that you could just check its presence in the request parameter map.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
I Have tested this with non-ajax submits:
<p:inputText ... required="#{not empty param.includeInSave1}" />
...
<p:inputText ... required="true" />
...
<p:commandButton value="Save1" ajax="false">
<f:param name="includeInSave1" value="true" />
</p:commandButton>
<p:commandButton value="Save2" ajax="false" />
The first input is required validated only on Save1 button submit.
Additionally to the BalusC answer (very useful and complete) I want to add that when you use a <h:commandButton /> it will validate (required, custom validations) all the fields in the <h:form /> where the command button is located, therefore when you need to use more than one command button you could consider that it is a good practice to use different <h:form /> to different responsibilities to avoid unexpected behavior in submit actions of the command buttons.
It is well explained in a BalusC answer: Multiple h:form in a JSF Page
If your form has validations and you do not update the <h:form /> or you do not show messages, you could get a headache thinking that the <h:commandButton /> is not firing your action, but likely is a validation problem that has not been shown.
Change your filter commandbutton like this to ignore validation:
<p:commandButton value="Filter" update="list" actionListener="#{itemsBean.updateItemsList}" process="#this"/>
EDIT:
The related post on SO, I think this will solve your issue too
JSF 2.0: How to skip JSR-303 bean validation?
I'm working with JSF 2.2.9, i have the following dataTable and buttons:
<h:commandButton id="commandButtonRemoverSelected"
actionListener="#{managedBeanName.removeSelected()}"
class="btn btn-primary" value="Sim">
</h:commandButton>
<h:dataTable var="bean" value="#{managedBeanName.beans}" styleClass="table table-hover"
binding="#{managedBeanName.dataTable}">
<h:column headerClass="smallColumn">
<f:facet name="header">
<h:selectBooleanCheckbox valueChangeListener="#{managedBeanName.selectAll}">
<f:ajax execute="#form" render="#all" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox value="#{managedBeanName.registrosSelecionados[bean]}" />
</h:column>
</h:dataTable>
The button "commandButtonRemoverSelected" just call actionListener on second click. When i remove the following line from datatabe everything works fine (the commandButton is called on first click):
<h:selectBooleanCheckbox value="#{managedBeanName.registrosSelecionados[bean]}" />
So, my managedBean have a MAP called 'registrosSelecionados' that should store a pair "Bean,Boolean". See:
private Map<Bean, Boolean> registrosSelecionados = new HashMap<Bean, Boolean>();
SOLUTION
I solved the problem with a workaround and i would share this:
1 - I noted that every first commandButton click the 'getRegistrosSelecionados()' is called and actionListener don't. So i imagine that JSF is processing getRegistrosSelecionados() and don't processing actionListener, i don't know why and this is the real problem. In second click the actionListener is processed because all checkboxs already sent to ManagedBean, in first click.
2 - So, my workaround is force that each click in checkbox call JSF request and don't wait for commandButton submit. In this way when commandButton is clicked all checkbox was processed.
<h:selectBooleanCheckbox value="#{cc.attrs.managedBeanName.registrosSelecionados[bean]}">
<f:ajax execute="#this" render="#this" />
</h:selectBooleanCheckbox>
My checkbox received the ajax to execute only itself and render itself, when i click in commandButton i just need execute the commandButton and render the form again:
<h:commandButton id="commandButtonRemoverSelected"
actionListener="#{cc.attrs.managedBeanName.removeSelected()}"
class="btn btn-primary" value="Sim">
<f:ajax execute="#this" render="#form" />
</h:commandButton>
This workaround works for me, as i didn't found a better solution for this problem.
I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
I have several inputText boxes on a page with associated edit/submit buttons (which work). I want to make it so that when the user presses enter from inside the inputText box, the form is submitted. For one of my forms, it works, for the other, it doesn't. Here's the one that doesn't work:
<h:form>
<iframe src="#{appInfo.documentation}"/>
<h:commandButton value="Edit" >
<f:ajax listener="#{appInfo.editDoc}" render="#form"/>
</h:commandButton>
<h:commandButton value="Save" >
<f:ajax listener="#{appInfo.saveDoc}" render="#form"/>
</h:commandButton>
<h:inputText value="#{appInfo.documentation}" >
<!-- pressing enter causes page refresh -->
<f:ajax/>
</h:inputText>
</h:form>
And the one that does:
<h:form>
<h:dataTable id="table" value="#{appInfo.model.apps}" var="a">
<h:column>
<f:facet name="header">URL</f:facet>
<h:outputText value="#{a.url}"/>
<h:inputText value="#{a.url}">
<!-- pressing enter does NOT causes page refresh -->
<f:ajax/>
</h:inputText>
</h:column>
</h:dataTable>
... command buttons
</h:form>
Any ideas?
Pressing "Enter" in an input field fires the same behaviour like clicking the first button of that form. In your second example there is no button at all. As soon as you add e.g. a commandButton there (like in the first example), the enter will be executed like expected.