I try to apply primefaces to my project. I created a test page to demo the ajax. The listener was called but the UI component was not updated with new value.
I am using Primefaces 4.
Here is my code (I do the same with the showcase here: http://www.primefaces.org/showcase/ui/ajax/poll.xhtml):
<h:form id="testForm">
<h:outputText id="txt_count" value="A: #{testBean.number}" />
<p:poll interval="30" listener="#{testBean.increment}" update="testForm:txt_count" />
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:panelGroup style="margin-top:5;" styleClass="statusBar">
<h:graphicImage value="/images/ajax-busy.gif" style="width:15;height:15;margin:0;padding:0;"/> Checking...
</h:panelGroup>
</f:facet>
<f:facet name="stop">
<h:panelGroup style="margin-top:5;" styleClass="statusBar">
<h:outputText value=" " style="width:15;height:15;"/>
</h:panelGroup>
</f:facet>
</p:ajaxStatus>
</h:form>
I debug on Firefox and get the response:
<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="testForm:txt_count"><![CDATA[<span id="testForm:txt_count">A: 1</span>]]></update><update id="javax.faces.ViewState"><![CDATA[rO0ABXVyABNbTGphdmEubc3Npb25... too long ...weHNxAH4CcAApQ==]]></update>
and this error:
XML Parsing Error: no element found Location:
moz-nullprincipal:{2b3608be-0d4d-4533-8ca1-52b28a98a16d} Line Number
1, Column 56128:
...AfgG1cQB+AbVxAH4BtXBweHhweHhxAH4BpQ==]]>
...-------------------------------------------------^
You can see that the response xml is missing closing tag for <partial-response> and <changes>
Could you please help me to find out the root cause?
==============================================================================
Above issue was resolved by removing richfaces from application
==============================================================================
UPDATED:
This works on Firefox but not works on IE.
Here is what I get: http://i.stack.imgur.com/qq6m8.png
Related
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>
Using p:treetable selectionMode="checkbox", I am trying to have a checkbox on the header so that selecting it would select all the checkboxes in all the rows of the treetable. All my attempts to invoke the p:ajax listener method processSelectAllRows have failed. I was able to get this done using p:datatable and need the same functionality using p:treetable. Any help will be greatly appreciated.
Below is the code:
<h:form id="searchFormId">
<p:panel id="searchPanelId">
<p:outputPanel id="ResultsPanelId">
<p:treeTable id="resultsTreeTableId" value="#{aBean.resultsRoot}"
scrollRows="20" scrollable="true" var="aNode"
selectionMode="checkbox" selection="#{aBean.selectedResultNodes}">
<p:ajax event="select" listener="#{aBean.onNodeSelect}"
update="resultsTreeTableId" />
<p:ajax event="unselect" listener="#{aBean.onNodeUnselect}"
update="resultsTreeTableId" />
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="allChkb" name="allChkb"
value="#{aBean.selectAll}">
<p:ajax listener="#{aBean.processSelectAllRows}"
process="#this" update="resultsTreeTableId" />
</p:selectBooleanCheckbox>
</f:facet>
<h:outputText value="#{aNode.name}" />
</p:column>
</p:treeTable>
</p:outputPanel>
</p:panel>
</h:form>
Here is the listener method
public void processSelectAllRows(AjaxBehaviorEvent event) {
System.out.println("Select all rows.");}
Environment:
1) Primefaces 3.5 (Won't be able to upgrade any time soon)
2) myfaces-bundle 2.1.15
3) Tomcat server
4) Java 1.7
Instead of AjaxBehaviorEvent you can use NodeSelectEvent.
NodeSelectEvent is a subclass of AjaxBehaviorEvent present in Primefaces 3.5 API. If you is using a not final primefaces version is better use Primefaces Objects instead of Faces Objects.
Hope I have help you! :)
The problem is when i use global status for ajax requests and ExtendedDataTable together strange bug happens - when i scroll down (i have large data loaded in the table) ajax request keep spaming in the console and the ajax status (picture loading) keep flashing.
there is my code:
<h:head></h:head>
<h:body>
<h:outputText value="TEsts with Extended Table" />
<h:form id="form">
<a4j:status id="waithStatus"
onstart="#{rich:component('waithStatusPanel')}.show();"
onstop="#{rich:component('waithStatusPanel')}.hide();">
<f:facet name="start">
<rich:popupPanel id="waithStatusPanel" autosized="true">
<h:graphicImage library="images" name="waith.gif" />
</rich:popupPanel>
</f:facet>
</a4j:status>
<h:panelGrid columns="2">
<rich:extendedDataTable value="#{testKrasi.tableList}" var="row" id="table"
selectionMode="none" clientRows="10" style="height:250px;width:400px"
iterationStatusVar="it">
<rich:column>
<f:facet name="header">#</f:facet>
#{it.index}
</rich:column>
<rich:column filter="#{testKrasi.vendorFilter}" filterType="custom">
<f:facet name="header">
vendor
</f:facet>
<h:outputText value="#{row[1]}"/>
</rich:column>
<rich:column filter="#{testKrasi.modelFilter}" filterType="custom">
<f:facet name="header">
model
</f:facet>
<h:outputText value="#{row[2]}"/>
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</h:form>
</h:body>
</html>
and there is screenshot of the firebug console
the AJAX response is
<partial-response>
<changes>
<update id="javax.faces.ViewState">-2313795786913874202:5967295793801101249</update>
</changes>
</partial-response>
I don't know what to do... i try to fix this problem over a week now...
Please help me.
As you are using ajax lazy data loading for the table, these data load requests cause status to show.
You need either disable ajax data loading if you don't need that (refer to RichFaces Showcase to know how).
Or to disable status to show on the table updates. You can wrap the table into a4j:region to do this.
overflow,
since yesterday I have for unknown reasons following problem:
i have a list of items, and when i delete one of them and let the page refresh by ajax, it stucks after the deletion-procedure and prints me following error:
Jul 28, 2013 3:54:42 PM org.apache.myfaces.context.servlet.ServletExternalContextImpl setResponseContentType
SEVERE: Cannot set content type. Response already committed
the deletion code is called by:
public void deleteEntry(AjaxBehaviorEvent event){...} //runs fine
and the ajax part is:
<h:commandButton value="delete" onclick="closeDialog(deleteDlg);">
<f:ajax event="click" execute="#form" render=":maintable" listener="#{updateEntryMetaDataBean.deleteEntry}"/>
</h:commandButton>
i don't really know why this error occurs, it seems like it only occurs on this specific page, on other pages with the same behaviour it runs fine.
my ajax-status hangs up and keeps running too:
<!-- AJAX-STATUS INFO -->
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
<f:facet name="start">
<p:graphicImage value="resources/images/loading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
what can I do there?
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.