i have a o:datatable with pagination. Here is the code:
enter code <o:dataTable id="table" value="#{Bean.vproduct}" var="product" pageSize="3">
<f:facet name="header">
<h:outputText value="Header" styleClass="title"/>
</f:facet>
<o:column>
<h:panelGrid columns="1">
<h:outputText value="#{product.description}"/>
</h:panelGrid>
</o:column>
<f:facet name="below">
<h:panelGroup id="panelGroup">
<o:dataTablePaginator id="paginator"/>
</h:panelGroup>
</f:facet>
At the most I have 2 pages, not more and to navigate from page 1 to page 2 works, but
when I am on page 2 I can't naviagte back to the first page.
Can anyone help me please?
I've solved the problem. It has something to do with Partial state saving:
Getting class java.lang.ClassCastException for two consequent AJAX calls called from within a composite component
Jsf Error : java.lang.ClassCastException
I have put this in my web.xml and now it works
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
Related
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
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.
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>
I have a data table that needs to be refreshed upon using an ajax command found in each row.
<div class="authorSection">
<h:dataTable id="author-table" var="author" value="#{authorPOCBean.getauthors()}">
<h:column>
<f:facet name="header">
<h:outputText value="Org Short Name" />
</f:facet>
<h:outputText id="authorOrganizationShortName" value="#author.orgShortName}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Organization Name" />
</f:facet>
<h:outputText id="authorOrganizationName" value="#{author.orgName}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Location" />
</f:facet>
<h:outputText id="authorLocation" value="#{author.orgLocation}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="author Type" />
</f:facet>
<h:outputText id="authorType" value="#{author.authorName}" />
</h:column>
<h:column>
<h:form id="deleteauthorForm">
<h:commandLink action="#{authorPOCBean.deleteauthor(author)}" value="Delete">
<f:ajax render=":author-table"/>
</h:commandLink>
</h:form>
<h:form id="setInitialauthorForm">
<h:commandLink action="#{authorPOCBean.makeInitialauthor(author)}" value="Make Initial"/>
</h:form>
</h:column>
</h:dataTable>
</div>
When the delete function is used it seems to leave the table unchanged or perhaps renders it with old data? I've got it set now to the first thing the called method does is change the internal array THEN changes the database stuff but it still uses the old data.
Is there something obviously wrong with my code?
I have looked at the below link and tried the recommendations and have no new result. In fact if I surround the table with a form the table won't build right.
JSF- <f:ajax> can't render datatable
Please be noted that you have placed the Delete Button and Make initial Buttons enclosed in a separate form whereas the DataTable component is placed outside the form .
Try having a single form starting at at the start of the table . (ie) Your table component and the two buttons should be enclosed within the same form
and for Ajaxical refresh, the following should work for you .
<f:ajax render="#form"/>
If for some other reason you cannot use a single form and need multiple forms , Please refer this question How to retain form data in a multi form page
There is business need to categorize items. Best idea seems to be dragdrop items from one list into list of categories. Number of categories can vary so p:dataTable is used.
Ajax request is sent but onDrop method is not called from inside dataTable. When Removing datatable and column and having outputpanels statically then onDrop is called?
How to best drag and drop items into dynamically changing categories?
<h:form prependId="false">
<h:panelGrid columns="2">
<p:dataTable id="itemstable" value="#{categoryBean.items}" var="item">
<p:column>
<p:outputPanel id="itemrow">
<h:outputText value="#{item}"></h:outputText>
</p:outputPanel>
<p:draggable for="itemrow"></p:draggable>
</p:column>
</p:dataTable>
<p:dataTable value="#{categoryBean.categories}" var="cat">
<p:column>
<p:outputPanel id="cats1">
<h:outputText value="category1"></h:outputText>
</p:outputPanel>
<p:droppable for="cats1"
dropListener="#{categoryBean.onDrop}"
tolerance="pointer"
activeStyleClass="slotActive"
datasource="itemstable">
</p:droppable>
</p:column>
</p:dataTable>
</h:panelGrid>
</h:form>
There is a bug in PrimeFaces, when <p:droppable> is nested in any data repeating element the dropListener does not get called. I also tried using the Facelets repeat tag <ui:repeat> but the dropListener was not called just like dragging to the <p:dataTable> .
In the PrimeFaces showcase all of the drag an drop examples have static droppable areas.
PrimeFaces ShowCase