Prime Community Forum

Posted: **11 Jul 2012, 23:24**

hey guys, first of all, sorry for my english, i'm brazilian.
so, i have some problems with the datatable, when i use it with a template, some functions don't work.
example, when i use paginator, i can't change the page, if i'm using a template, when i take it off, it works fine.
same thing when i use livescroll.

well, check it out.

my page:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.jspx">
	<ui:define name="body">
		<h:head>
			<title>TechPizza.com.br -- Seja bem vindo!</title>
		</h:head>

		<h:body>
			<h:form id="form">
				<p:growl id="growl" showDetail="true" sticky="true" />

				<p:fieldset id="fieldset" styleClass="page"
					legend="#{msg.my_orders}">
					<p:dataTable scrollRows="10" rowStyleClass="line1; line2"
						id="orders" var="order" scrollHeight="200" scrollWidth="1300"
						value="#{myOrdersBean.orders}" scrollable="true" liveScroll="true">

						<p:column headerText="#{msg.value}" width="500">  
            			#{order.value} 
    				</p:column>

						<p:column headerText="#{msg.pizzeria}" width="668">  
            			#{order.pizzeria.name}  
    				</p:column>

						<p:column width="32">
							<p:commandButton icon="ui-icon-search"
								update=":j_idt6:form:detailsDialog" oncomplete="details.show()">
								<f:setPropertyActionListener value="#{order}"
									target="#{myOrdersBean.selectedOrder}" update="form" />
							</p:commandButton>
						</p:column>
					</p:dataTable>

				</p:fieldset>

				<p:dialog styleClass="page" id="detailsDialog" style="width:500px"
					widgetVar="details" header="#{msg.order_details}">

					<h:panelGrid columns="1">
						<h:outputText styleClass="label"
							value="#{myOrdersBean.selectedOrder.pizzeria.name}" />
						<h:outputText styleClass="label"
							value="#{myOrdersBean.selectedOrder.value}" />
					</h:panelGrid>

					<p:dataTable rowStyleClass="line1; line2" id="tableProducts"
						value="#{myOrdersBean.itens}" var="item"
						rendered="#{not empty myOrdersBean.selectedOrder.itens}">

						<p:column headerText="#{msg.name_title}">  
            					#{item.product.description}  
      						</p:column>

						<p:column headerText="#{msg.price}">  
            					#{item.product.value}  
      						</p:column>

						<p:column headerText="#{msg.quantity}">
      							#{item.quantity}
      					</p:column>
					</p:dataTable>
				</p:dialog>
			</h:form>
		</h:body>
	</ui:define>
</ui:composition>

</html>

my template:

Code: Select all

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view>
	<h:head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet"
			href="#{facesContext.externalContext.requestContextPath}/resources/css/arq.css" />
		<br />

		<script type="text/javascript">
			function handleDrop(event, ui) {
				var draggable = ui.draggable, helper = ui.helper, position = ui.position, offset = ui.offset;
			}
		</script>

		<f:loadBundle basename="br.com.techpizza.properties.prop" var="msg" />
	</h:head>

	<h:form prependId="false">
		<p:growl id="growl" showDetail="true" sticky="true" />
		<h:body>
			<p:layout id="layout" fullPage="true">
				<p:layoutUnit styleClass="header" position="north" size="160">
				</p:layoutUnit>

				<p:layoutUnit styleClass="myLayoutStyleClass" position="west"
					size="165">
					<p:menu>
						<p:submenu label="#{msg.menu}">
							<p:menuitem styleClass="label" value="Página inicial"
								action="#{createAccountBean.index}"
								rendered="#{!userSession.loggedIn}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.create_account}"
								action="#{createAccountBean.createAccountPage}"
								rendered="#{!userSession.loggedIn}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.forgot_password}"
								action="#{forgotPasswordBean.forgotPassword}"
								rendered="#{!userSession.loggedIn}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.pizzerias}"
								action="#{pizzeriasBean.pizzerias}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.to_order}"
								rendered="#{userSession.loggedIn}" action="#{orderBean.order}"
								update="growl" />
							<p:menuitem styleClass="label" value="#{msg.my_orders}"
								rendered="#{userSession.loggedIn}"
								action="#{myOrdersBean.myOrders}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.my_account}"
								rendered="#{userSession.loggedIn}"
								action="#{updateAccountBean.myAccount}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.change_password}"
								rendered="#{userSession.loggedIn}"
								action="#{changePasswordBean.changePasswordPage}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.logout}"
								rendered="#{userSession.loggedIn}"
								action="#{authenticator.logout}" update="growl" />
							<p:menuitem styleClass="label" value="#{msg.about}"
								action="#{authenticator.about}" update="growl" />
						</p:submenu>
					</p:menu>

					<br />
					<h:outputText styleClass="message"
						value="#{msg.mensagem_logado} #{userSession.user.login}"
						rendered="#{userSession.loggedIn}" />
					<h:outputText styleClass="message"
						value="#{msg.mensagem_deslogado}"
						rendered="#{!userSession.loggedIn}" />
					<br />
					<br />
					<h:outputText styleClass="message"
						value="#{msg.mensagem_deslogado_dois}"
						rendered="#{!userSession.loggedIn}" />
				</p:layoutUnit>

				<p:layoutUnit styleClass="myLayoutStyleClass" position="center">
					<ui:insert name="body" />
				</p:layoutUnit>

				<p:layoutUnit styleClass="footer" position="south" size="180">
				</p:layoutUnit>

			</p:layout>
		</h:body>
	</h:form>
</f:view>
</html>

and my bean:

Code: Select all

@Component
@Scope("session")
public class MyOrdersBean extends AbstractBean {
	private static final long serialVersionUID = -2605122305959108180L;

	@Autowired
	private UserSession session;

	@Autowired
	private IUserDAO userDao;

	private List<Order> orders;

	private Order selectedOrder;
	
	@PostConstruct
	public void init(){
		orders = userDao.getById(session.getUser().getId()).getOrders();
	}
	
	public List<Order> getOrders() {
		return orders;
	}

	public List<Item> getItens() {
		return selectedOrder.getItens();
	}

	public Order getSelectedOrder() {
		return selectedOrder;
	}

	public void setSelectedOrder(Order selectedOrder) {
		this.selectedOrder = selectedOrder;
	}

	public void setOrders(List<Order> orders) {
		this.orders = orders;
	}
}

anyone can help me?

and again, sorry for my english, if you don't understand something, i'm gonna try to explain in another way, thanks!

Posted: **12 Jul 2012, 02:50**

well, now i've noticed that when i take my <p:layout> off, it works too, i have no idea what is happening and why it's like that.
please, can someone help me?

thanks again!

Posted: **19 Jul 2012, 16:12**

I am seeing what appears to be the same issue using a template, layout and datatable. I am experiencing the same types of problems you describe with a similar structure. When I look at it with the javascript console, if I double-click on a rown in the non-working table, I get the following error:

Uncaught TypeError: Cannot read property 'rowDblselect' of undefined primefaces.js.jsf:11

The table works fine on another page that uses Layout, but no template. So, I think whatever is happening is related to the above error.

Hopefully someone else with more experience might understand what is (or is not) happening here.

Prime Community Forum

Problem with DataTable

Problem with DataTable

Re: Problem with DataTable

Re: Problem with DataTable