<p:ajax update=""> inside nested components - ajax

Iam using Mojarra 2.2.11 (WildFly 9.0.1) with PF 5.3.
In relation with my original question:
<p:ajax update="...> cell or row update inside PF subTable
I am still struggling with the following line: <p:ajax update=":tabView1:form1:mainTable".../>
The following part has been changed: #{subTableView.getAllheaders(tabview)}. Below references have been used but the datatable refresh does not seem to work.
I have done several researches and tried multiple options without success.
The operation looks easy: I need to process a selectOneRadio value to update the outputLabel in the next column of the datatable. I am not getting any error: but the radio selection comes back to the initial position when another radio is clicked without updating the outputlabel.
I paid attention that outputLabel is surrounded by a panelGroup (see reference). NamingContainer with proper syntax has been tried:
BalusC ref: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
I tried with RequestContext#update("tabView1:form1:mainTable:panel") with the below references:
Primefaces p:ajax listener conditional update
PF Showcase
<f:ajax execute="" render=""/> has been tried
Reference: Mastering JSF 2.2 Book
I was thinking about the last jQuery option but I still think it is doable with JSF.
Thank you for your time.
<p:tabView id ="tabView1" value="#{bean.titles}" var="tabItem" >
<p:tab id="tab1" title="#{tabItem}" >
<h:form id="form1" >
<p:dataTable id="mainTable" value="#{subTableView.getAllHeaders(tabItem)}" var="head" >
<p:subTable id="subTable1" value="#{head.questions}" var="question" >
<f:facet name="header">
#{head.name}
</f:facet>
<p:column id="questionColumn">
#{question.question}
</p:column>
<p:column id="radioColumn">
<p:selectOneRadio id="mainSelect" value="#{question.select1}" >
<f:selectItem itemLabel="Yes" itemValue="#{question.responseOfYes}" />
<f:selectItem itemLabel="No" itemValue="#{question.responseOfNo}" />
// here is my pain:
<p:ajax update=":tabView1:form1:mainTable" process="#this"
listener="#{subTableView.updateSecond(question.select1)}"/>
</p:selectOneRadio>
</p:column>
<p:column id="responseColumn">
<h:panelGroup id="panel" >
<h:outputLabel id="display1" value="#{question.select1}" />
</h:panelGroup>
</p:column>
</p:subTable>
</p:dataTable>
</h:form>
</p:tab>
</p:tabView>

Related

How can I update twice during JSF Ajax event

Given the following code:
<p:column headerText="#{text.article}">
<h:panelGroup>
<p:autoComplete id="relationArticle"
value="#{relation.article}"
completeMethod="#{articleRelationsModel.findArticles}"
queryDelay="#{text.query_delay}"
minQueryLength="#{text.artikkel_min_query_length}"
var="article"
itemLabel="#{article.articleNo} #{article.text1}"
itemValue="#{article}"
converter="#{articleConverter}"
scrollHeight="150"
forceSelection="true"
styleClass="ui-autocomplete-big">
<p:ajax event="itemSelect" update="relationUnit" process="#this"/>
</p:autoComplete>
<p:message for="relationArticle"/>
</h:panelGroup>
</p:column>
<p:column headerText="#{text.unit}" style="width: 80px;">
<h:selectOneMenu id="relationUnit" value="#{relation.unit}" converter="#{articleUnitConverter}">
<f:selectItem itemLabel="<< #{text.search}" noSelectionOption="true" itemDisabled="#{relation.article != null}"/>
<f:selectItems value="#{articleRelationsModel.getUnits(relation)}" var="unit" itemLabel="#{unit.code}" itemValue="#{unit}"/>
<p:ajax event="change" process="#this" update="#this"/>
</h:selectOneMenu>
<p:message for="relationUnit"/>
</p:column>
How can I refresh the "relationUnit" component after the user has selected a value in the "relationArticle" component?
What happens now, is that after the autcompete itemSelect event has fired, the "relationUnit" component gets updated with new content using #{articleRelationsModel.getUnits(relation)}. During this update, the relation object is updated with one of the options from the resulting list. This, however, is not reflected in the "relationUnit" component after the update. But if I manually do another update after this, it gets selected.
How can I achieve the wanted result here?
You can use p:remoteCommand, which is usually used to call the ManagedBean Methods from Javascript.
While it serves the above purpose you can use it to update other components also.
You can call the p:remoteCommand from p:ajax's oncomplete attribute.
<p:autoComplete id="relationArticle" ...>
<p:ajax event="itemSelect" update="relationUnit" onComplete="updateRelationUnit()" process="#this"/>
</p:autoComplete>
<p:remoteCommand name="updateRelationUnit" update="relationUnit" process="#this" />
Now p:ajax will update relationUnit once and then calls the p:remoteCommand which in-turn relationUnit again.
I don't know why you want this strange behavior, but the above strategy and code servers your purpose just fine.

p:inputText in p:dataTable not setting the value in the bean

I'm trying to implement a dataTable which contains (among other things) a column with a textInput so I can modify a string value in the bean. My problem is that the bean does not update correctly, so this is part of my code:
<p:scrollPanel style="height:625px" mode="native">
<p:dataTable value="#{oaBean.documentos}" var="documento"
rowIndexVar="rowIndexVar" rowKeyVar="documentoKey" id="documentoList"
widgetVar="myTableWidget" paginator="true" rows="50"
emptyMessage="#{messages['norecords']}">
<f:facet name="header">
<h:outputText value="#{messages['documents']}" />
</f:facet>
<p:column style="width:1px;margin:0;padding:0;" headerText="#">
<h:outputText value="#{rowIndexVar+1}"
style="font-size:0.75em;margin:0;padding:0;" />
</p:column>
//lots of another columns
<p:column headerText="#{messages['documento.orden']}"
style="width:25px; text-align: center" id="columnOrden" widgetVar="columnOrden">
<p:inputText id="ordenDocumento" value="#{documento.orden}"
disabled="#{documento.eliminado}" style="font-size:0.9em" size="2"
validator="floatValidator">
</p:inputText>
</p:column>
</p:dataTable>
</p:scrollPanel>
The thing is that when the control returns to the bean the value of orden is not updated, I always have the old value. I've also tried adding an ajax listener for the change event and it seems to work fine, but if I change for example, 5 rows, at least one of them maintains the old value, so my question is: is there any known problem with dataTables and textInputs? Is something wrong with my code?
Any help will be really appreciated, thanks in advance guys.
UPDATE
Sorry, I've forgot to include some information. First of all, I'm working with Mojarra 2.1.5, PrimeFaces 3.4.2 and Facelets and running in Tomcat 7. Second, and probably the most important, the code presented above is included through a tab into a larger xhtml:
<ui:define name="body">
<rich:panel styleClass="createFormPanel">
<h:panelGroup layout="block" style="margin:0 auto;width:100%;" id="principalPanel">
<div style="height: 665px"><p:tabView id="tabs" widgetVar="tabsView" activeIndex="#{oaBean.activeTab}">
<p:tab id="tab5" title="#{messages['oa.tab.contenido']}">
<h:form id="formTab2">
<ui:include src="/pages/oa/tabContenido.xhtml" />
</h:form>
</p:tab>
</p:tabView></div>
</h:panelGroup>
</rich:panel>
</ui:define>
In this case, tabContenido.xhtml is the page containing the data table definition. Didn't include the java code because is just a bean with getter and setter values. If you need more information just let me know.
Regards.
Try adding an ajax event to the column and updating the hole table, something like this:
<p:column headerText="#{messages['documento.orden']}"
style="width:25px; text-align: center" id="columnOrden">
<p:inputText id="ordenDocumento" value="#{documento.orden}"
disabled="#{documento.eliminado}" style="font-size:0.9em" size="2"
validator="floatValidator">
<p:ajax event="change" update="documentoList" />
</p:inputText>
</p:column>

Datatable not refreshing with ajax

I have two calendar controls and one command button. basically i want to give a range of date to pick the data from the database and then when i press the command button the datatable is displayed in the dialog box, the problem is java bean class is working it is loading the exact data which i want, but the datatable is not refreshing with command button click
my code is given;
<h:form id="form" >
<p:calendar value="#{calendarBean.dateFrom}" id="calFrom" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectFrom}" />
</p:calendar>
<p:calendar value="#{calendarBean.dateTo}" id="calTo" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectTo}" />
</p:calendar>
<p:commandButton value="Submit" action="#{calendarBean.submit()}" update="fTable" onclick="aDlg.show()">
<f:ajax render=":form:fTable" execute="#form"></f:ajax>
</p:commandButton>
<p:dialog id="aDialog" header="Filter List" widgetVar="aDlg"
modal="true" showEffect="explode"
hideEffect="explode" >
<p:panel id="pnl">
<p:dataTable id="fTable" value="#{calenderBean.list}" var="row" >
<p:column headerText="ID">
<h:outputText value="#{row.ID}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{row.Name}"/>
</p:column>
<p:column headerText="Time">
<h:outputText value="#{row.Time}"/>
</p:column>
<p:column headerText="User">
<h:outputText value="#{row.userName}"/>
</p:column>
</p:dataTable>
</p:panel>
</p:dialog>
</h:form>
kindly guide me regarding this issue
First thing to do, is remove the f:ajax, it's not working good with Primefaces. Also the update attribute should do everything.
This said, I have the very same code as yours which is working good.
If removing f:ajax is not working, try to check your managed bean scope (May be it's of request scope and data is re-initialized with every request)
Try Updating the dialog instead.
update="fTable"

Primefaces ajax update

I have primefaces datatable,
<p:panel id="resultpanel">
<p:dataTable id="tbl" var="job" value="#{report.jobModel}"
paginator="true" rows="#{report.jobModel.pageSize}"
paginatorPosition="bottom" lazy="true" scrollable="true"
resizableColumns="true" rendered="#{!empty report.jobModel}"
emptyMessage="#{messages['common.datatable.emptymessage']}">
<p:ajax event="filter" listener="#{report.jobModel.onFilter}"
update="#form" />
<p:column sortBy="#{job.detail4}" filterBy="#{job.detail4}">
<f:facet name="header">
<h:outputText value="#{messages['content.donejobs.ftdi.datatable.fixedfeecolumn.header']}" />
</f:facet>
<h:outputText value="#{job.detail4}">
<f:converter converterId="KurusLiraConverter"></f:converter>
</h:outputText>
</p:column>
<f:facet name="footer">
<h:outputFormat value="#{messages['content.donejobs.ftdi.datatable.footer']}">
<f:param value="#{report.jobModel.rowCount}" />
</h:outputFormat>
<p:panel layout="block" style="border: 0px; text-align: center;">
<p:commandLink ajax="false" title="Download Report">
<p:graphicImage value="/images/excel.png" />
<p:fileDownload value="#{report.excelFileOfReportTable}" />
</p:commandLink>
</p:panel>
</f:facet>
</p:dataTable>
</p:panel>
I want to update the footer part when I filter the table. I have tried to update the footer by putting all the things in the footer in a single panel, giving it an ID, inspecting this ID via firebug, and giving it as a value to the update attribute of the primefaces ajax component. I have also performed this approach, to html outputformat and param components. But no success, lastly I have tried to update the form, this time the whole table has been rendered like a text file. Is there a way to update the table size, after filtering? By the way, I am using primefaces 3.0.RC1-SNAPSHOT, and testing in firefox 7.0.1. Thank you very much for your interest and comment.
There is an open issue for that here and they provide a patch for the dataTable code. My workaround (aka huge hack) doesn't require touching the primefaces codebase, which I prefer. I tested it for the events below, but I can't see why it wouldn't work for the rowEdit event.
<p:remoteCommand name="updateFilters" update="table:totalid"></p:remoteCommand>
<p:dataTable id="tabelaMunicipio" value="#{bean.model}" ...>
<p:ajax event="page" oncomplete="updateFilters()"/>
<p:ajax event="filter" oncomplete="updateFilters()"/>
<p:ajax event="sort" oncomplete="updateFilters()"/>
<p:column headerText="#{msg['id']}" sortBy="#{id}">
<h:outputText value="#{item.id}"></h:outputText>
<f:facet name="footer">
<h:outputText value="#{bean.model.totals['id']}" id="totalid"/>
</f:facet>
</p:column>
...
</p:dataTable>
Yes, I use a p:remoteCommand (invoked by the oncomplete client-side hook in p:ajax) to update the components inside the footer row. This causes a tiny delay on the footer update in comparison to the data itself, but I can live with that.
3.0.RC1-SNAPSHOT is not an official release, and from what I can tell it could mean any number of nightly builds after M4 or between M3 and M4. You should upgrade (or downgrade?) to a stable release such as M3 or M4 and see if you get the same problems.
Also you could try update="#this", but I'm unsure what effect that would have that shouldn't already work with #form.

Ajax call is made but the related fields are updated only after page refresh

I have tried making an ajax call for a selectOneMenu using JSF 2 and primefaces 2.2. The actionListener method is being called. But the columns I specified in the update attribute are not getting updated. When I refersh the page, I could find the updated values. Please help me out in this.
The code I used was
<h:form id="mainForm" prependId="false">
<p>
<p:tabView>
<p:tab title="Receipt">
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="table1:#{rowIndex}:receiptCode, table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Print">
</p:tab>
Try f:ajax instead of p:ajax and re-render the whole form to get closer to the problem source :
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model"
itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<f:ajax render="#form"
listener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}"/>
</h:selectOneMenu>
This should work as stated in my answer to your previous question.
Partial updates of dataTables and ajax updates of dataTables triggered from a component within the dataTable are not working in the 2.2 version of Primefaces. This is a known bug that may have been resolved in version 3.
One suggestion you can try is to use a single form for each dataTable and only update elements from within that one form.

Resources