Proper technique for Ajax updating when Item Selecting

UI Components for JSF
Post Reply
cgswtsu78
Posts: 53
Joined: 25 Jan 2011, 19:18

17 Mar 2011, 16:08

Hello,

I have a dataGrid and a carousel component that have image links for each item in the respective lists whose details gets expanded (for update purposes) on a dialog with a commandButton whose purpose is to persist those changes and update the page. The p:dataGrid gets updated with the below setup, but the p:carousel is emptied out on the browser after I click the commandButton on the dialog. If I close the page and come back both are updated. Any ideas here? I think my technique is a bit off but I'm very new to Primefaces and I'm unsure how to handle this situation. Any help would be greatly appreciated!

Main Page that calls the dialog window to do item selection and update its values.

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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:p="http://primefaces.prime.com.tr/ui"
	xmlns:dc="http://dc.dreamcatcher.com/facelet-taglib">
<ui:composition template="#{layoutBean.registeredTemplate}">
	<ui:define name="title">#{bundle['dreamModify.title.TEXT']}</ui:define>
	<ui:define name="content">
		<h:form id="dreamModifyFrm" binding="#{dreamModify.dreamModifyFrm}">
			<div class="content-wrap2">
				<div class="content-modify">
					<h1 class="content-headers">
						<h:outputText value="#{bundle['dreamModify.header.TEXT']}" />
					</h1>
					<p>
						<h:outputText value="#{bundle['dreamModify.subheader.TEXT']}" />
					</p>
					<div class="top-dreams">
						<div class="top-bg"></div>
						<div class="top-middle-content">
							<ul class="top-ten-nav">
								<li><p:commandLink
										value="#{bundle['dreamModify.upload.link.TEXT']}" onclick="dreamUploadDlg.show()" />
								</li>
								<li><p:commandLink
										value="#{bundle['dreamModify.search.link.TEXT']}" onclick="webSearchDlg.show()"/>
								</li>
								<li><p:commandLink
										value="#{bundle['dreamModify.addText.link.TEXT']}" />
								</li>
								<li><p:commandLink
										value="#{bundle['dreamModify.dreamButton.link.TEXT']}" onclick="bookmarkletInstalDlg.show()"/>
								</li>
								<li class="border-remove"><p:commandLink
										value="#{bundle['dreamModify.mobileApp.link.TEXT']}" />
								</li>
							</ul>
							<h:outputText value="#{bundle['dreamModify.instructions.TEXT']}" />
							<p:dataGrid var="dream" value="#{dreamModifyBean.topDreams}"
								columns="5" rows="10">
								<p:column>
									<h:panelGrid columns="1" style="width:100%">
										<h:outputText class="uppercase" value="#{dream.number}. #{dream.title}" />
										<p:commandLink oncomplete="dreamEditDlg.show()" update="dreamModifyFrm:display"> 
											<f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/>
											<p:graphicImage value="#{dream.imageThumb}" width="125" height="100" />
										</p:commandLink>
										<h:outputText class="smaller" value="#{bundle['dreamModify.notes.TEXT']} #{dream.notes}" />
										<h:outputText class="smaller" value="#{bundle['dreamModify.tags.TEXT']} #{dream.tags}" />
										<h:outputText class="smaller" value="#{bundle['dreamModify.cost.TEXT']} #{dream.cost}" />
									</h:panelGrid>
								</p:column>
							</p:dataGrid>
						</div>
						<div class="top-bottom"></div>
					</div>
					<div class="dream-collect-wrap">
						<h1 class="content-headers">
							<h:outputText
								value="#{bundle['dreamModify.dreamCollection.subheader.TEXT']}" />
						</h1>
						<p>
							<h:outputText
								value="#{bundle['dreamModify.dreamCollection.instructions.TEXT']}" />
						</p>
						<p:carousel value="#{dreamModifyBean.dreams}" var="dream">
								<p:column>
									<h:panelGrid columns="1" style="width:100%">
										<p:commandLink oncomplete="dreamEditDlg.show()" update="dreamModifyFrm:display"> 
											<f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/>
											<p:graphicImage value="#{dream.imageThumb}" width="125" height="100" />
										</p:commandLink>
									</h:panelGrid>
								</p:column>
							</p:carousel>
						</div>
					</div>
				</div>
			<dc:dreamEdit/>
		</h:form>
	</ui:define>
</ui:composition>
</html>
dialog being called with commandButton to refresh page above

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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:p="http://primefaces.prime.com.tr/ui"
	xmlns:dc="http://dc.dreamcatcher.com/facelet-taglib">
<ui:component>
	<p:dialog header="#{bundle['dreamUpload.HEADER']}"
		widgetVar="dreamEditDlg" 
		modal="true" 
		styleClass="dialog dialog2"
		draggable="false" 
		resizable="false" 
		showEffect="fade"
		hideEffect="fade">
		<p:panel id="display">
			<div class="dialog-top-reg"></div>
		<div class="dialog-middle-reg">
			<h:form><p:commandButton styleClass="close zoom3" onclick="dreamEditDlg.hide()" /></h:form>
			<div class="dialog-content dialog-content4">
				<div class="dream-edit-top">
					<div class="dream-edit-img">
						<p:graphicImage id="edtImg" value="#{dreamModifyBean.selectedDream.imageThumb}" width="200" height="110" />
						<h:outputLabel class="dream-number" value="#{dreamModifyBean.selectedDream.number}" />
						<p:commandLink value="#{bundle['dreamEdit.changeImage.link.TEXT']}"/><br/>
						<p:commandLink value="#{bundle['dreamEdit.originalImage.site.link.TEXT']}"/><br/>
					</div>
					<div class="dream-edit-title">
						<fieldset class="fs fs-3">
			 				<h:outputLabel class="title" value="#{bundle['dreamAdd.title.label.TEXT']}" />
							<h:inputTextarea styleClass="ta1" value="#{dreamModifyBean.selectedDream.title}"/>
							<h:outputText styleClass="character-limit" value="#{bundle['dreamAdd.title.max.length.TEXT']}"/>
						</fieldset>
						<h:outputLabel class="slider-label" value="#{bundle['dreamAdd.potentialCost.label.TEXT']}" /> 
						<div class="dream-edit-slider"> 
							<div class="slider-grades">	
								<h:outputText value="#{bundle['dreamAdd.potentialCost.low.label.TEXT']}" />
								<h:outputText value="#{bundle['dreamAdd.potentialCost.medium.label.TEXT']}" />
								<h:outputText value="#{bundle['dreamAdd.potentialCost.high.label.TEXT']}" />
							</div>
							<h:inputHidden id="cost" value="#{dreamModifyBean.selectedDream.cost}" />
							<p:slider for="cost" minValue="1" maxValue="5"/>
						</div>
					</div>
				</div>
				<fieldset class="fs fs-3">
					<h:outputLabel class="notes" value="#{bundle['dreamAdd.notes.label.TEXT']}" />
					<h:inputTextarea styleClass="ta2" value="#{dreamModifyBean.selectedDream.notes}"/>
					<h:outputLabel class="tags" value="#{bundle['dreamAdd.tags.label.TEXT']}" />
					<h:inputText styleClass="ip1" value="#{dreamModifyBean.selectedDream.tags}"/>
					<h:outputText styleClass="tag-limit" value="Separate tags with commas (i.e. travel, tropical vacation)"/>
					<div class="options">
						<p:commandLink value="#{bundle['dreamEdit.deleteDream.link.TEXT']}"/>
						<p:commandLink value="#{bundle['cancel.TEXT']}"/>
						<p:commandButton styleClass="form-btn1" value="#{bundle['save.button.TEXT']}" update="dreamModifyFrm"  
							actionListener="#{dreamModify.update}"  oncomplete="dreamEditDlg.hide()" ajax="false"/>
					</div>
				</fieldset>
			</div>
		</div>
		<div class="dialog-bottom-reg"></div>
		</p:panel>
	</p:dialog>
</ui:component>
</html>

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 33 guests