Below is screenshot of selectOneMenu break
Below is my code :
<h:form>
<h:commandLink value="Edit">
<p:ajax event="action" update=":editPanel" listener="#{myBean.open(productItem,'edit')}"/>
</h:commandLink>
</h:form>
<h:panelGroup layout="block" id="editPanel">
<h:form>
<p:selectOneMenu label="hello" value="hello">
<f:selectItems itemLabel="#{mybean.labelvalueList}" itemValue="#{mybean.valueList}"/>
</p:selectOneMenu>
</h:form>
</h:panelGroup>
I am facing problem in display selectonemenu of PrimeFaces when event fire using ajax, as per my observation it will break combobox functionality when ajax call ,one more thing data from back end coming properly there is problem with display only.
Anybody can help me to fix this problem ?
I am using PrimeFaces 5
Related
I have next a4j:jsFunction
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true"
render="securityForm">
</a4j:jsFunction>
and JSF form with some dialog inside
<h:form id="securityForm">
<h:panelGroup rendered="#{someCondition}">
......
</h:panelGroup>
</h:form>
In my business logic it has to be executed twice consequently. In the first time all is fine. Rendered method is invoked and the expected dialog is present on the page. In the second time rendered method is not invoked, but model has been changed and I expect that dialog will not be present on the page. I supposed that it's some richfaces issue and I tried to use f:ajax
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true">
<f:ajax event="begin" render=":securityForm"/>
</a4j:jsFunction>
but unsuccessfully. Rendered method still not invoked in the second time. What is it? Some JSF optimization or bug? What's the workaround?
JSF version 2.1.19
The problem was in <h:panelGroup rendered="#{someOtherCondition}">
over h:form which equals false after the first rendering (ON THE SERVER SIDE).
However, this panelGroup is not part of rendering. So, my code:
<h:panelGroup rendered="#{someOtherCondition}">
<h:form id="securityForm">
<h:panelGroup rendered="#{someCondition}">
......
</h:panelGroup>
</h:form>
</h:panelGroup>
<h:form>
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true"
render="securityForm">
</a4j:jsFunction>
</h:form>
Before calling renderOnBusinessErrorEvent() I'm changing the value of someOtherCondition from true to false, but I don't rerender this element. Actually, on the server side this element is already missing. Looks like it's JSF feature, but is it specificated somewhere?
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 am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
I am trying to pass a parameter to an ajax event, this is an example of what I mean:
<h:panelGrid id="pictures" columns="3">
<c:forEach items="#{createProduct.pictures}" var="picture">
<h:graphicImage value="#{picture.source}" />
<h:inputText value="#{picture.alt}" />
<p:commandButton value="Remove">
<f:ajax execute="#form"
listener="#{createProduct.removePicture(picture)}"
render="#form" />
</p:commandButton>
</c:forEach>
</h:panelGrid>
I know this code won't work because you cannot pass a parameter through the ajax listener. Though this is merely an example of what I am trying to accomplish. I have tried using <f:param id="picture" value="#{picture}" /> allong with the ajax tag, though this results in a duplicate component ID form:picture since it is in a loop.
I need this parameter inside the method in order to determine which picture to remove.
How can I solve this with ajax?
I am using a #ViewScoped CDI-bean.
First, I suggest replacing c:forEach with ui:repeat tag. Second, as you are using Primefaces, you should use all its strength. So, commandButton can be more easily written:
<p:commandButton value="Remove" process="#form" update="#form" action="#{createProduct.removePicture(picture)}"/>
and that's it. Don't complicate.
By the way, primefaces commandButton is sends AJAX request by default, you don't need (and you must not use) f:ajax tag.
I am using Mojarra implementation of JSF 2.1 with Primefaces 3.2.
My problem approximately looks like this:
<p:dialog id="someDialog">
..
<h:form id="dialogForm">
<p:commandLink action=".."update=":someForm:someUIRepeat:someDataTable:someInputTextArea"/>
</h:form>
</p:dialog>
<h:form id="someForm">
<ui:repeat id="someUIRepeat" value=".." ..>
<p:dataTable id="someDataTable" value=.. >
<p:column>
<p:inputTextarea id="someInputTextarea" value=../>
<p:column>
.. here go other columns
<ui:repeat>
</h:form>
The issue is that when I click on the commandLink in the dialog the inputTextarea is not updated. However, if I write this in the update of the commandLink:
update=":someForm:someUIRepeat:someDataTable,:someForm:someUIRepeat:someDataTable:someInputTextArea"
then the whole dataTable gets updated and the inputTextarea updates as well, but the values in the fields located in other columns get erased after I click on the commandLink in the dialog.
The reason why I put dataTable inside of ui:repeat is that I need to bind a dataTable with each row of one collection and I think it's not related to my problem.
Any ideas how I can solve this problem?
Thanks in advance,
Nurzhan.
for start try this
added onclick="jQuery('#someForm:someButton').click();"(check the exact id of your hidden button) to your <p:commandLink inside the dialog
set the update to update=":someForm:someUIRepeat:someDataTable"
and add
<h:commandButton id="someButton" style="display:none">
<f:ajax execute="#form"></f:ajax>
</h:commandButton>
to <h:form id="someForm">
explanation: the purpose of the hidden button is to execute (send its values) the form to the server so that when you do call update the fields wont be erased...