Fields are cleared when update p:tabView - ajax

I have a popup with three tabs in primefaces tabPanel. In the middle is a table called "composicao", this tab is rendered when user marks checkbox that is located in first tab.
The tables have a lot of inputs, selects and checkboxes that user can fill in any order, so if the user fill all fields and then mark the checkbox, all fields are cleared cause that checkbox update the tabView. I tryied set some fields immediate attribute to true and set p:ajax process attribute to #all, but with this approach nothing happens.
This is the code of tabPanel:
<h:panelGroup id="abasCadastroProduto">
<p:tabView>
<p:tab title="base">
<ui:include src="../../tabs/abaEdicaoBaseProduto.xhtml"/>
</p:tab>
<p:tab id="abaComposicao" title="composicao" rendered="#{produto.composto}">
<ui:include src="../../tabs/abaEdicaoComposicaoProduto.xhtml"/>
</p:tab>
<p:tab
title="tributacao">
<ui:include src="../../tabs/abaEdicaoTributacaoProduto.xhtml"/>
</p:tab>
</p:tabView>
</h:panelGroup>
this is part of the code of first tab:
<h:panelGroup layout="block">
<p:fieldset legend="geral">
<h:panelGroup layout="block">
<h:selectBooleanCheckbox id="produtoAtivoCheck"
value="#{produto.ativo}"/>
<h:outputLabel value="ativo" for="produtoAtivoCheck"/>
<h:selectBooleanCheckbox id="produtoMovimentoCheck"
value="#{produto.movimentaEstoque}"/>
<h:outputLabel value="movimento" for="produtoMovimentoCheck"/>
<!-- THIS IS THE CHECKBOX -->
<h:selectBooleanCheckbox id="produtoCompostoCheck"
value="#{produto.composto}">
<p:ajax event="change" update="abasCadastroProduto" process="#all"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="composto" for="produtoCompostoCheck" />
</h:panelGroup>
.......
<h:panelGroup layout="block">
<h:outputLabel value="descricao"/>
<p:inputText value="#{produto.descricao}" required="true" immediate="true"
requiredMessage="obrigatorio"/>
<h:outputLabel value="complemento"/>
<p:inputText value="#{produto.descricaoComplementar}"/>
</h:panelGroup>
......
</p:fieldset>
</h:panelGroup>
Is there a way I can solve this problem??
I think is unnaceptable to user see fields they spend some time to fill, been cleared when you click in a checkbox...

Solved.
The problem was validation of required fields, so I've created a REQUIRED parameter and set it to false when user clicks checkbox:
<h:selectBooleanCheckbox id="produtoCompostoCheck"
value="#{produto.composto}" styleClass="popup-produto-geral-check">
<f:param name="REQUIRED" value="false"/>
<f:ajax event="change" immediate="true" render="abasCadastroProduto" execute="#form" />
</h:selectBooleanCheckbox>
<h:selectOneMenu value="#{produto.idClasse}" immediate="true"
required="#{param['REQUIRED']}" validatorMessage="#{cadastroMsg['popup.cadastro.produto.base.classe.invalido']}"
requiredMessage="#{cadastroMsg['popup.cadastro.produto.base.classe.obrigatorio']}">
<f:selectItems value="#{selectItemClasse.itens}"/>
<f:ajax event="change" immediate="true" render="selectSubclasse"/>
</h:selectOneMenu>
and I've made submit button set "REQUIRED" parameter to true.

instead of this:
<p:ajax event="change" update="abasCadastroProduto" process="#all"/>
try this:
<p:ajax render="#form" />

Related

Values repeated in jsf <ui:repeat>

I have repeated values on my form. I am using <ui:repeat> tag.
My code:
<h:panelGroup id="alvs">
<ui:repeat value="#{encuestaController.newEncuesta.preguntas}" var="preg">
<h:outputLabel for="preg" value="add question:" style="font-weight:blue" />
<p:inputText id="preg" value="#{preg.pregunta}" />
<h:outputLabel for="value2" value="The question is option:" style="font-weight:bold" />
<p:selectBooleanButton id="value2" value="#{preg.opcional}" onLabel="Si" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" style="width:60px">
<p:ajax update="f1:growl2"/>
</p:selectBooleanButton>
<h3 style="margin-top:2px">Question Type</h3>
<p:selectOneMenu value="#{preg.tipo}">
<f:selectItem itemValue="1" itemLabel="one option" />
<f:selectItem itemValue="2" itemLabel="many option" />
</p:selectOneMenu>
<h:panelGroup id="aux">
<ui:repeat value="#{preguntaController.newPregunta.opciones}" var="opc">
<h:panelGroup id="pn11" rendered="#{preg.tipo eq 1}">
uno<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
<h:panelGroup id="pn12" rendered="#{preg.tipo eq 2}" >
dos<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
<p:commandButton class="btn-floating btn-large waves-effect waves-light red" actionListener="#{preguntaController.addOcion}" update="f1:growl2" value="Add" >
<f:ajax execute="pn11 pn12" render="alvs" />
</p:commandButton>
The problem is when I want to add a new option(opciones) in the question(pregunta) with <p:commandButton/>
This adds the same options for the previous question as for the new one.
Maybe, the error is ajax? <f:ajax execute="pn11 pn12" render="alvs" />
Help me!!!
Image Description
As i see it, the problem is regarding the fact that you are producing multiple options using the ui:repeat, but you are declaring the same id for each of the panelGroups inside.
Add some custom prefix or sufix to each of the ids based on some unique value from the var="opt" (like an id):
<ui:repeat value="#{preguntaController.newPregunta.opciones}" var="opc">
<h:panelGroup id="pn11#{opc.id}" rendered="#{preg.tipo eq 1}">
uno<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
<h:panelGroup id="pn12#{opc.id}" rendered="#{preg.tipo eq 2}" >
dos<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
</ui:repeat>
Otherwise you will keep overriding the previous panelGroup's.
Also you would need to use a broader scope of execution for your ajax request.
I would use the first panelGroup outside of the ui:repeat:
<f:ajax execute="aux" render="alvs" />

PrimeFaces SelectOneMenu not updating values after ajax update

I've been working with PrimeFaces for less than 24 hours so maybe I'm missing the obvious.
I have two SelectOneMenu components. the second one is no rendered at first. When a value is changed in the first one. the listener retrieves data from db, update ManagedBean property with the data and change boolean property to show the second one. The second Menu is now rendered but no data is shown.
Here is the snippet:
<h:form prependId="false" id="notaForm">
<h:panelGrid>
<p:selectOneMenu value="#{notaBean.idCurso}"
style="width:150px" >
<f:selectItem itemLabel="Seleccione curso" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{notaBean.cursos}" var="c" itemLabel="#{c.nombre}" itemValue="#{c.idCurso}"/>
<p:ajax event="change" listener="#{notaBean.onSelectCurso}" update="alumno" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="alumno">
<p:selectOneMenu value="#{notaBean.idAlumno}" var=""
style="width:150px" rendered="#{notaBean.mostrarAlumnos}">
<f:selectItem itemLabel="Seleccione alumno" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{notaBean.alumnos}" var="a" itemLabel="#{a.nombre}" itemValue="#{a.idAlumno}"/>
<p:ajax event="change" listener="#{notaBean.onSelectAlumno}" update="nota" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="nota">
<p:outputLabel for="nota" value=""
rendered="#{notaBean.mostrarNota}" />
<p:inputText value="#{notaBean.nota}" label="nota"
rendered="#{notaBean.mostrarNota}" />
<h:commandButton action="#{notaBean.insertarNota()}" id="button"
value="Guardar nota" rendered="#{notaBean.mostrarNota}"/>
</h:panelGrid>
</h:form>
notaBean.alumnos has a size of 2 (it recovers both alumni from db), and the properties nombre and idAlumno shows correctly when I print them out in console.

JSF Ajax not submitting

I have the following JSF code in my page
<h:panelGroup id="rSelectionPanel" rendered="#{bean.admin}">
<h4 class="header-line">Admin Panel</h4>
<h:panelGroup rendered="#{bean.selectionMode=='RS'}">
<h:form styleClass="registerForm">
<h:outputLabel value="End Line1?" rendered="#{not bean.endLine2}"></h:outputLabel>
<h:selectBooleanCheckbox id="endLine1" value="#{bean.endLine1}" rendered="#{not bean.endLine2}">
<p:ajax event="change" update=":rSelectionPanel"></p:ajax>
</h:selectBooleanCheckbox>
<h:outputLabel value="End Line2?" rendered="#{not bean.endLine1}"/>
<h:selectBooleanCheckbox id="endLine2" value="#{bean.endLine2}" rendered="#{not bean.endLine1}">
<p:ajax event="change" update=":rSelectionPanel"></p:ajax>
</h:selectBooleanCheckbox>
<h:inputTextarea id="newLine2Name" styleClass="form-poshytip" title="Line2 Name" rows="1" maxlength="50"
value="#{bean.newLine2Name}" validatorMessage="Too many characters" rendered="#{bean.endLine2}">
<f:passThroughAttribute name="placeholder" value="Line2 Name" />
<f:validateLength maximum="50" />
</h:inputTextarea>
<h:commandButton styleClass="submit" value="Select Line" action="#{bean.confirmLineBy}">
</h:commandButton>
</h:form>
</h:panelGroup>
</h:panelGroup>
With the following backing bean java code
public void confirmLineBy(){
getLog().debug("Entering confirmLineBy....");
ConfirmLineByRequest request = new ConfirmLineByRequest();
request.setPage(getPage());
request.setEndLine1(endLine1);
if(isEndLine2())request.setNewLine2Name(newLine2Name);
request.setEndLine2(isEndLine2());
ConfirmLineByResponse response = LineService.confirmLineBy(request, null);
nextUnconfirmedLines.removeAll(nextUnconfirmedLines);
setConfirmedLines(response.getConfirmedLines());
setLine2s();
setAddedLine(false);
getLog().debug("CONFIRMED LINES SIZE: "+confirmedLines.size());
getLog().debug("Exiting confirmLineBy....");
}
When clicking the commandButton with neither of the boxes checked, it submits fine. But when checking either of the checkboxes, it doesn't even call bean.confirmLineBy().
Any ideas?
Changed from using to . sorted now.

Parts which are ajax-rendered after actions doesn't work fine unless you reload the page

The fist time I go to the JSF page and I make an action for rendering some parts of the page, those parts are not rendering anymore. However, if you reload the page, thats areas are rendering fine.
For me, it seems that first time the page is constructed the ids are not prepended correctly. That causes the Jboss server to ignore every posted value because it cannot find a concurrent element in the site.
Reloading the page solves the problem with the false prepending of the ids.
I don't know because this, someone got the same problem? I have tried to solve it, but I was impossible.
Here you have the code:
<h:form id="select" styleClass="applic_filterside" binding="#{companyOverview2.selectForm}">
<a4j:region>
<h:panelGroup layout="block" styleClass="applic_filter_selectrow">
<tibuga:selectManyCheckbox label="Branche:" valueBean="#{companyOverview2}" valueProperty="selectedSectorID"
id="selSec" items="#{generalData.allSectors}" itemValue="#{c.id}" var="c" itemLabel="#{c.name}" width="174"
showButtonsSelectAll="false" display="none">
<a4j:ajax event="click" onbegin="submitSearch();"></a4j:ajax>
</tibuga:selectManyCheckbox>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="applic_filter_selectrow">
<a4j:commandLink action="#{companyOverview2.filterSearchEntrys()}" onclick="flushInputs(this);" oncomplete="turnInputs(document.getElementById('select:button'));"
render="companyTableNew" execute="#form" limitRender="true" id="button">
<h:graphicImage value="/resources/images/fields/filter.png" />
</a4j:commandLink>
</h:panelGroup>
</a4j:region>
</h:form>
<h:panelGroup id="companyTableNew" >
<h:form>
<h:panelGroup layout="block" styleClass="applic_filter_countrow">
<h:outputText value="Treffer: #{companyOverview2.count()} Unternehmen" />
</h:panelGroup>
<a4j:region>
<h:panelGroup layout="block" id="cont" styleClass="applic_applicants">
<h:panelGroup layout="block" styleClass="top_line">
<h:panelGroup layout="block" styleClass="sectors">
<h:outputText value="Branche" />
</h:panelGroup>
<h:panelGroup layout="block" styleClass="location">
<h:outputText value="Standort" />
</h:panelGroup>
<h:panelGroup layout="block" styleClass="size">
<h:outputText value="Größe" />
</h:panelGroup>
</h:panelGroup>
<ui:repeat value="#{companyOverview2.filteredCompanysNew}" var="a">
<tibuga:singleCompanyEntry entry="#{a}" />
</ui:repeat>
<h:panelGroup layout="block" styleClass="companys_actions">
<a4j:commandLink value="weitere Unternehmen anzeigen ..." action="#{companyOverview2.showMore()}" render="companyTableNew" rendered = "#{companyOverview2.showMoreLink}"/>
</h:panelGroup>
</h:panelGroup>
</a4j:region>
</h:form>
</h:panelGroup>
The problem is that the first time that you go to the page, you can see the results correctly, but if you make a query the datas from CompanyTableNew are wrong, but reloading the page all is right.

a4j commandlink not working after rerender

The text with id=txt is inserted outside the commandlink after rerendering.
And therefore the link is broken. A refresh of the page gets it back.
Could somebody please help?
<h:form id="frm">
<h:selectOneMenu value="#{myBean.currentId}">
<f:selectItems value="#{myBean.selectListA}" />
<a4j:support event="onchange" action="#{myBean.changeSomething}"
reRender="priceGroup,idLink" />
</h:selectOneMenu>
<h:panelGroup id="priceGroup">
<a4j:commandLink id="idLink">
<h:outputText id="txt" value="#{myBean.someValue}" />
</a4j:commandLink>
</h:panelGroup>
</h:form>

Resources