Datatable doesn't update contents

pjw · 03 Nov 2010, 02:44

Hi,

Datatable doesn't update contents after added a new user. The new row is visible after clicked the refresh button in browser. I think AJAX requests don't work appropriately. My relevant code snippets below:

template.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns="http://www.w3.org/1999/xhtml">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/base.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/ui.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/cupertino/skin.css" />
	<title>UserList 1.0</title>
</h:head>

<h:body>
	<div id="wrapper">
		<div id="header"></div>
		<div id="content"><ui:insert name="content" /></div>
		<div id="footer" class="mw-widget">2010</div>
	</div>
</h:body>

</html>

list.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns="http://www.w3.org/1999/xhtml"
	template="./template.xhtml">
	
	<ui:define name="content">
	
		<p:dialog header="Add user" widgetVar="userDialog" resizable="false">
		<h:form>
			<p:growl id="addUserGrowl" showDetail="true" />
			<h:panelGrid columns="2">
				<h:outputLabel value="Firstname: *" for="firstnameLabel" />
				<h:inputText id="firstnameLabel" value="#{userController.user.firstName}" />
				<h:outputLabel value="Lastname: *" for="lastnameLabel" />
				<h:inputText id="lastnameLabel" value="#{userController.user.lastName}" />
				<h:outputLabel value="E-Mail: *" for="emailLabel" />
				<h:inputText id="emailLabel" value="#{userController.user.email}" />
				<h:outputLabel value="Age:" for="ageLabel" />
				<h:inputText id="ageLabel" value="#{userController.user.age}" />
				<h:outputLabel value="Sex: *" for="sexLabel" />
				<h:selectOneMenu value="#{userController.user.sex}" style="width: 100%">
					<f:selectItem itemValue="" itemLabel="-- Choose" />
					<f:selectItem itemValue="1" itemLabel="Female" />
					<f:selectItem itemValue="2" itemLabel="Male" />
				</h:selectOneMenu>
				<p:commandButton value="Reset" type="reset" />
				<p:commandButton value="Add" type="submit" update="usersForm:usersTable,addUserGrowl" action="#{userController.addUser}" oncomplete="handleAddUserRequest(xhr, status, args)" />
			</h:panelGrid>
		</h:form>
		</p:dialog>
	
		<script type="text/javascript">
			function handleAddUserRequest(xhr, status, args) {
				if(!args.validationFailed) {
					userDialog.hide();
				}
			}
		</script>
	
		<h:outputText value="Don't have any users." rendered="#{userBean.countRow == 0}" />
		
		<h:form id="usersForm">
		<p:toolbar style="margin-bottom: 10px">
			<p:commandButton title="Add" type="push" image="ui-icon-document" action="#{userController.reinitUser}" onclick="userDialog.show()" />
		</p:toolbar>
		<p:dataTable id="usersTable" value="#{userTable.lazyDataModel}" var="user" rendered="#{userBean.countRow > 0}"
			paginator="true" dynamic="true" lazy="true" rows="15" selection="#{userTable.selected}" selectionMode="single">
			<p:column sortBy="#{user.firstName}">
				<f:facet name="header">
					<h:outputText value="Firstname" />
				</f:facet>
				<h:outputText value="#{user.firstName}" />
			</p:column>
			<p:column sortBy="#{user.lastName}">
				<f:facet name="header">
					<h:outputText value="Lastname" />
				</f:facet>
				<h:outputText value="#{user.lastName}" />
			</p:column>
			<p:column sortBy="#{user.email}">
				<f:facet name="header">
					<h:outputText value="E-Mail" />
				</f:facet>
				<h:outputText value="#{user.email}" />
			</p:column>
			<p:column sortBy="#{user.age}" style="text-align: center">
				<f:facet name="header">
					<h:outputText value="Age" />
				</f:facet>
				<h:outputText value="#{user.age}" rendered="#{user.age != null}" />
				<h:outputText value="-" rendered="#{user.age == null}" />
			</p:column>
			<p:column sortBy="#{user.sex}" style="text-align: center">
				<f:facet name="header">
					<h:outputText value="Sex" />
				</f:facet>
				<h:outputText value="F" rendered="#{user.sex == 1}" />
				<h:outputText value="M" rendered="#{user.sex == 2}" />
			</p:column>
		</p:dataTable>
		</h:form>
		
	</ui:define>
	
</ui:composition>

Is it a bug in Primefaces or just my code?

My workbench:
Primefaces 2.2.RC1
GlassFish Server Open Source Edition 3.0.1 (build 22)

callahan · 03 Nov 2010, 02:59

Hi,

After a row is added to a lazy DataTable, a number of things need to be performed. Verify that the addUser method does the following:

- updates the LazyDataModel rowCount
- updates the DataTables page and first so that the new row is displayed
- calls the DataTables loadLazyData method

pjw · 07 Feb 2011, 15:08

Thank you, it works! I have used to update datatable, as following:

Code: Select all

DataTable dataTable = (DataTable)  FacesContext.getCurrentInstance().getViewRoot().findComponent("form:table");
dataTable.loadLazyData();

Datatable doesn't update contents

Who is online