PrimeFaces: DefaultCommand.js and DefaultCommand.css required - spring

I'm trying to solve a problem I have with a form that works correctly, but when I inspect the downloaded resources through the Network tab, I see that 2 files are required and not found (404 error):
defaultcommand.css.xhtml?ln=primefaces&v=5.3.15
defaultcommand.js.xhtml?ln=primefaces&v=5.3.15
Please, help me understand the reason behind Primefaces requiring these 2 files, and how to avoid this requirement.
I'm using JSF 2.2 in a Spring 3.1.4 project.
Thanks a lot.
<h:form styleClass="smsForm">
<h:panelGroup layout="block" styleClass="separarArribaMas separarAbajoMas">
<p:commandButton global="false" action="#{proposicionBean.botonIrPedirTelefono()}" onclick="PF('estadoOperacionDialog').show();" oncomplete="PF('estadoOperacionDialog').hide();" title="#{msg['sms.citainternet.cita.botonConfirmarCita.mensaje']}" styleClass="accion colorPrimario" value="#{msg['sms.citainternet.cita.botonSiguientePasoCita']}" ajax="false"/>
<p:commandButton global="false" action="#{proposicionBean.botonIrCambiarCitaMobile()}" onclick="PF('estadoOperacionDialog').show();" oncomplete="PF('estadoOperacionDialog').hide();" title="#{msg['sms.citainternet.cita.botonCambiarCita.mensaje']}" styleClass="accion" value="#{msg['sms.citainternet.cita.botonCambiarCita']}" ajax="false"/>
<p:commandButton ajax="true" onclick="mostrarDialogo();" title="#{msg['mensaje.volver.pagina.inicio']}" styleClass="accion rojo" global="false" value="#{msg['sms.citainternet.botonCancelar']}"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="separarArribaMas">
<p class="ayuda">
<h:outputFormat value="#{msg['sms.citainternet.cita.citaPropuesta.texto.ayuda']}" escape="false">
<f:param value="#{msg['sms.citainternet.cita.botonSiguientePasoCita']}"/>
</h:outputFormat>
</p>
</h:panelGroup>
<h:outputScript>
function mostrarDialogo() {
PF('dialogoDeseaVolver').show();
$('body').addClass("ocultar");
$("#wrapper").attr("aria-hidden", "true");
$("#dialogoDeseaVolverFoco").focus();
}
</h:outputScript>
</h:form>

Related

jsf ajax request recreates viewscoped bean

I use JSF 2.2 and Primefaces 3.5, and I have a problem with ajax request when I update parent component:
<h:panelGroup id="PAG_CARTELERA" layout="block">
<h:form id="FRM_CARTELERA">
<h:panelGroup rendered="#{!carteleraController.existeCookieCinePref}">
<ui:include src="/paginas/cartelera/cinePreferidoIn.xhtml" />
</h:panelGroup>
<h:panelGroup rendered="#{carteleraController.existeCookieCinePref}">
<ui:include src="/paginas/cartelera/carteleraOut.xhtml" />
</h:panelGroup>
</h:form>
</h:panelGroup>
In the page carteleraOut.xhtml I have:
<p:calendar id="CART_FECHA" value="#{carteleraController.fechaConsulta}"
maxlength="10"
size="10"
locale="es"
pattern="dd/MM/yyyy"
navigator="true"
showOn="button"
showButtonPanel="true">
<f:converter converterId="calendarConverter" />
<p:ajax process="#this" update=":PAG_CARTELERA" event="dateSelect" listener="#{carteleraController.consultarOtroDiaAction}" />
In the "consultarOtroDiaAction" listener I set the "existeCookieCinePref" boolean field and return void to stay in the same view ("carteleraController" is a ViewScoped a bean).
However the first ajax request when I change the value of the p:calendar component works fine, but the following requests recreates the ViewScoped bean.
Why is this?
Thank you.
NOTE: If in the p:calendar ajax request I update a component of the carteleraOut.xhtml itself, it works, but if I update the whole PAG_CARTELERA panelgroup, it recreates the bean.
can you try h:panelGroup inside of h:form
<h:form id="FRM_CARTELERA">
<h:panelGroup id="PAG_CARTELERA" layout="block">
<h:panelGroup rendered="#{!carteleraController.existeCookieCinePref}">
<ui:include src="/paginas/cartelera/cinePreferidoIn.xhtml" />
</h:panelGroup>
<h:panelGroup rendered="#{carteleraController.existeCookieCinePref}">
<ui:include src="/paginas/cartelera/carteleraOut.xhtml" />
</h:panelGroup>
</h:panelGroup>
</h:form>

<p:tabview> is not keeping track of data when page is reloaded in PrimeFaces 4.0

Hi I have some validation on my form (Java web application), and when the validation is displayed, it should reload the page. When it does this, I lose all the data input in the dropdown list in first tab.(Data in text boxes are retained)
Below is how I define my tabview :
<p:tabView id="tabView" dynamic="true">
Anyone can help on this? Thanks in Advance
I am using PrimeFaces 4.0, spring, hibernate.
<h:form prependId="false">
<p:panel>
<h:panelGrid id="detail" columns="2" styleClass="grid"columnClasses="label,value">
<p:tabView id="tabView" dynamic="true" >
<p:tab id="tab1" title="bUS Details">
<h:outputTextvalue="#{ebusmsgs['ebus.bustitle.title']}:" />
<h:inputText id="ebus_bustitle" value="#{BusComponent.bus.empMinDiv}" />
</p:tab>
<p:tab id="tab2" title="Mechanic Details">
<h:outputTextvalue="#{ebusmsgs['ebus.mechanictitle.title']}:" />
<h:inputText id="ebus_mechanictitle" value="#{BusComponent.bus.empMinDiv}" />
</p:tab>
</p:tabView>
</h:panelGrid>
</p:panel>
</h:form>

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.

How to use p:ajax to update several components in order

I'm trying to render the following JSF page:
<h:form id="form" prependId="false">
<h:panelGrid width="100%">
<h:panelGroup id="tableDiv" layout="block">
<h:panelGroup layout="block" style="text-align: center;">
<p:dataTable id="table" var="_item"
value="#{primeBean.findTableModel()}">
...
</p:dataTable>
</h:panelGroup>
</h:panelGroup>
<h:panelGrid columns="2" width="100%">
<h:panelGroup id="barChartDiv" layout="block">
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv,tableDiv" />
</p:barChart>
</h:panelGroup>
<h:panelGroup id="pieChartDiv" layout="block">
<h:panelGroup layout="block">
<p:pieChart id="pieChart">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="tableDiv" />
</p:pieChart>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
</h:form>
When I click in any bar on p:barChart, I expect that the components in the update attribute would be rendered in the order that I declare (pieChartDiv,tableDiv), but they are rendered in reverse order (tableDiv,pieChartDiv).
Is this normal behavior? How can I update a component list in the order the items are declared?
That's not possible this way. The components are searched and updated in exactly the same order as they appear in the JSF component tree.
One way would be to rearrange/swap the both components in the tree hierarchy and reposition them visually with help of CSS. This is however rather clumsy.
Another way would be to update the 2nd component on complete of the update of the 1st component (and thus effectively end up with 2 ajax requests instead of 1). You can achieve that with help of <p:remoteCommand> which is invoked on complete of the <p:ajax>.
So, instead of
<p:ajax ... update="pieChartDiv,tableDiv" />
use
<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />
Not so elegant but working solution can be this:
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv" /> <!-- This will be updated as first. -->
<p:ajax event="itemSelect"
update="tableDiv" /> <!-- And this will be updated as second. -->
</p:barChart>

Primefaces update from inside another form

I'm not sure what's wrong with my HTML code. From what I read, it should work. I even tried using prependId="false" which didn't resolve the problem of not finding the UI Component.
<p:tabView>
<p:tab title="Tab1" id="tab1">
<h:form id="form1" prependId="false">
<p:panelGrid columns="2" id="grid1">
<h:outputLabel for="minDraw" value="Starting draw number:" />
<p:inputText id="minDraw" value="#{LottoMaxBacking.minDraw}" />
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update=":form2:freqTable" />
</p:panelGrid>
</h:form>
<h:form id="form2" prependId="false">
<p:dataTable var="entry" value="#{LottoMaxBacking.drawFreqList}"
id="freqTable">
<f:facet name="header">
<h:outputText value="#{LottoMaxBacking.tableHeader}" />
</f:facet>
<p:column sortBy="#{entry.key}" headerText="Ball Number">
<h:outputText value="#{entry.key}" />
</p:column>
<p:column sortBy="#{entry.value}" headerText="Frequency">
<h:outputText value="#{entry.value}" />
</p:column>
</p:dataTable>
</h:form>
</p:tab>
<p:tab title="Tab 2"></p:tab>
</p:tabView>
I tried ":tab1:form2:freqTable", ":freqTable", and "freqTable" but none of them work. When I put both forms together as a single form, it would find the freqTable fine.
OK I finally figured it out after looking at the error message again.
Cannot find component with identifier ":form2:freqTable" referenced from "j_idt54:j_idt56"
idt54 refers to the TabView and idt56 refers to the command button. So it turns out that my button's AJAX update string didn't go far enough original and all my other attempts referred to the wrong parent container. I added an id to p:tabView and changed the update String and it worked.
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update="tv:form2:freqTable" />

Resources