I've message in an xhtml page of course bound with a bean.
Now the messages are in a list, and i'm using ui:repeat to display the message and all that.
Now when i open a message, there's a reply button in the dialogGrid which opens another dialog on the same page,
I just need to pass data to that reply dialog.
In the first place, it's working fine, i mean if you click on the reply button directly it works fine, but when you open the message and then click on reply it doesn't update the dialog.
I've seen this
Pass parameter to dialog in the same page
But MY BEAN IS REQUEST SCOPED
Here's my xhtml code
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Styles/homepage-style.css" />
<link rel="stylesheet" type="text/css" href="../Styles/profile.css" />
<title>Shadi Bandhan | We find the best match for you</title>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="main-content">
<p:growl autoUpdate="true" />
<div id="left-pane">
<div id="profile-info-area">
<ui:insert name="profile_info_area" >
<ui:include src="profileInfoArea.xhtml" />
</ui:insert>
</div>
<div id="home-main-area">
<div id="messages-wrapper">
<div id="messages-header">
<div id="m-heading">
Messages - Inbox
</div>
<div id="m-search">
<div id="searchbox">
Search Messages <input type="text" value="Search" />
</div>
<div id="newmessage">
+ New Message
</div>
</div>
</div>
<h:form id="messagesForm">
<div id="messages">
<p:dialog id="messagesDialog" modal="true" widgetVar="messageDialog" resizable="false" width="750" height="300" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid">
<p:column>
<h:outputLabel for="msgRecepient" value="To"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="300" id="msgContents" value="#{messagesManagedBean.msg.message}" cols="65" rows="3" >
<p:watermark for="msgContents" value="#{userMsg.userId}" />
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton id="msgSend" value="Send" action="#{messagesManagedBean.sendMessage('reply')}" oncomplete="messageDialog.hide()" >
<f:param value="#{userMsg.userId}" name="messageSenderId" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<p:dialog id="messagesDialog2" modal="true" widgetVar="messageDialog2" resizable="false" width="750" height="300" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid2">
<p:column>
<h:outputLabel for="msgRecepient2" value="From"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient2" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents2" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea readonly="true" id="msgContents2" value="#{userMsg.message}" cols="65" rows="3" >
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton styleClass="reply-btn" value="Reply" update=":messagesForm:dialogGrid"
oncomplete="messageDialog.show(), messageDialog2.hide()">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div id="message">
<div id="senderImg">
<img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
</div>
<div id="message-txt-area">
<div id="senderName">
<p:commandLink styleClass="senderName" value="#{userMsg.userFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userMsg.userId)}"></p:commandLink>
</div>
<ui:fragment rendered="#{userMsg.isRead}">
<div id="message-txt">
#{userMsg.message}
</div>
</ui:fragment>
<ui:fragment rendered="#{not userMsg.isRead}">
<div id="message-txt" class="msgNotRead">
#{userMsg.message}
</div>
</ui:fragment>
<div id="msgAction">
<p:commandLink styleClass="reply-btn"
value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
<ui:fragment rendered="#{userMsg.isRead}">
<p:commandLink styleClass="open-btn" value="Open"
oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</ui:fragment>
<ui:fragment rendered="#{not userMsg.isRead}">
<p:commandLink styleClass="open-btn" value="Open"
action="#{messagesManagedBean.messageOpenedListener(userMsg.messageId)}"
oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</ui:fragment>
</div>
</div>
</div>
</ui:repeat>
<h:commandButton value="< prev" action="#{messagesManagedBean.paginator1.prev}"/>
<h:outputText value="#{messagesManagedBean.paginator1.pageIndex} / #{messagesManagedBean.paginator1.pages}"/>
<h:commandButton value="next >" action="#{messagesManagedBean.paginator1.next}"/>
<h:inputHidden value="#{messagesManagedBean.paginator1.pageIndex}"/>
</div>
</h:form>
</div>
</div>
</div>
<div id="right-pane">
<ui:insert name="right-pane" >
<ui:include src="right-pane.xhtml" />
</ui:insert>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Related
I am implementing a login page using PrimeFaces.
Faced with a strange behaviour when developing a Reset Password Dialog.
Here is my login.xhtml
<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.org/ui">
<f:metadata>
<f:event type="preRenderView" listener="#{loginManager.onPrerenderView}"/>
</f:metadata>
<h:head>
<h:outputStylesheet name="css/admin.css"></h:outputStylesheet>
</h:head>
<h:body>
<h:form id="loginForm" binding="#{loginManager.loginForm}">
<div class="login">
<div class="login-screen">
<p:message for="loginForm" id="message"/>
<div class="login-form">
<div class="control-group">
<h:inputText class="login-field" id="login-name" placeholder="username" required="true" rendered="true" value="#{loginManager.username}"/>
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<h:inputSecret class="login-field" id="login-pass" placeholder="password" required="true" value="#{loginManager.password}" />
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<p:commandButton value="Login" action="#{loginManager.login}" update="message" styleClass="btn btn-primary btn-large btn-block" />
<br/>
<h:outputLink id="openDialogLink" value="javascript:void(0)" onclick="PF('dlg').show();" style="color: white;">Lost your password?</h:outputLink>
<p:dialog id="lostPwd" widgetVar="dlg" header="Reset Password" visible="false" closeOnEscape="true" resizable="false" showEffect="clip" hideEffect="clip">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<h:inputText placeholder="username" required="true" value="#{loginManager.usernameForReset}"/>
<f:facet name="footer" >
<p:commandButton value="Reset" actionListener="#{loginManager.resetPwd}" update="#form" oncomplete="PF('dlg').hide();" />
</f:facet>
</h:panelGrid>
</p:dialog>
<p class="browser-warn">Best used with Chrome / Firefox</p>
</div>
</div>
<div style="clear: both"></div>
</div>
</h:form>
</h:body>
</html>
The first time I load the page, it looks normal:
But after I refresh the page:
Please clarify why this happening. What is wrong here ? Maybe some config issue?
I have a f:setPropertyActionListener within a data table and clicking on a command button the setpropertyaction listener is not being called. Any one see where I am going wrong?
thanks
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form id="userDetailsForm" style="padding:5px">
<p:growl id="messages" showDetail="true" autoUpdate="true" life="2000"/>
<p:spacer height="15"></p:spacer>
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<p:inputText type="text" styleClass="form-control" value="#{emailArticleBean.searchText}" />
<span class="input-group-btn" style="margin:3px;">
<p:commandButton actionListener="#{emailArticleBean.search}" value="Go!" update=":userDetailsForm:emailArticleTable" />
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<p:spacer height="15"></p:spacer>
<h:messages/>
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-11">
<p:dataTable var="email" value="#{emailArticleBean.emailArticles}" scrollRows="20"
scrollable="true" liveScroll="true" scrollHeight="750" id="emailArticleTable"
>
<p:column>
<p:accordionPanel multiple="true" activeIndex="-1" id="panel#{email.id}">
<p:tab title="#{email.headline}" titleStyleClass="email-header">
<div style="clear:both;margin-bottom:10px;">
<h6 style="font-weight:bold;">Summary</h6>
<h:outputText
value="#{email.summary}" />
</div>
<div style="clear:both;margin-bottom:10px;">
<h6 style="font-weight:bold;">Implication</h6>
<h:outputText
value="#{email.implication}" />
</div>
<div style="float:left;clear:both">
<p:commandButton value="View Existing Actions"
oncomplete="PF('dlg2').show();" update=":userDetailsForm:emailActionDialog">
<f:setPropertyActionListener value="#{email}" target="#{emailArticleBean.selectedEmail}" />
</p:commandButton>
</div>
<br/>
<br/>
<div style="margin-top:10px;">
<h:inputTextarea id="accordian1" value="#{email.tempAction}" cols="90" rows="3" />
</div>
<h6 style="font-weight:bold;">Due Date</h6>
<p:calendar value="#{email.tempDate}" id="popupCal" pattern="dd MMM, yyyy"/>
<p:commandButton actionListener="#{emailArticleBean.updateAction}" value="Add Action"
style="margin-left:5px;">
<f:setPropertyActionListener value="#{email}" target="#{emailArticleBean.selectedEmail}" />
</p:commandButton>
</p:tab>
</p:accordionPanel>
</p:column>
</p:dataTable>
</div>
</div>
<p:dialog id="emailActionDialog" header="Email Actions" widgetVar="dlg2" modal="true" height="100">
<h3>Email Actions</h3>
<p:dataList value="#{emailArticleBean.selectedEmail.actions}" var="action" itemType="disc">
#{action.action} --- #{action.username}
</p:dataList>
</p:dialog>
</h:form>
</html>
In my bean I have the following getter/setter
public EmailArticle getSelectedEmail() {
return selectedEmail;
}
public void setSelectedEmail(EmailArticle selectedEmail) {
this.selectedEmail = selectedEmail;
}
public void updateAction(ActionEvent ae) {
selectedEmail.getActions().add(new EmailActions(emailAction, "testUser", actionDueDate));
selectedEmail.merge();
}
The main problem here is the order of the invocation, first your actionListener is called then
f:setPropertyActionListener.
To solve this, change your actionListener to action, and update your action method to return a String.
Button
<p:commandButton action="#{emailArticleBean.updateAction}"
value="Add Action" style="margin-left:5px;">
<f:setPropertyActionListener value="#{email}"
target="# {emailArticleBean.selectedEmail}" />
</p:commandButton>
updateAction
public String updateAction() {
selectedEmail.getActions().add(new EmailActions(emailAction, "testUser", actionDueDate));
selectedEmail.merge();
return null;
}
OR
you can keep using your actionListener and pass the selectedEmail to it (without using f:setPropertyActionListener).
Button
<p:commandButton actionListener="#{emailArticleBean.updateAction(email)}"
value="Add Action" style="margin-left:5px;">
</p:commandButton>
updateAction
public void updateAction(EmailArticle selectedEmail) {
selectedEmail.getActions().add(new EmailActions(emailAction, "testUser", actionDueDate));
selectedEmail.merge();
}
To understand more the order of the invocation
See:
Differences between action and actionListener
I have a menutab on my template that i am using on every page. I would like to update a component from the template from another paged which is based on the template.
Its working like just any other emailpage, as soon as i read an email, it should update the number of the unread emails. The number is shown in the menutab in the template.xhtml and the emails are on my test.xhtml. As soon as I read an email it should update the number of the unread emails in the menutab in template.xhtml.
this is my template.xhtml
<ui:define name="navi">
<h:form id="navForm">
<div id="MMeineVersicherungen" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('1')}">#{messages['menu.1']}</h:commandLink>
</div>
<div id="MPolizzen" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.1')}"
styleClass="#{navigationController.isAktPageId('1.1') or navigationController.isAktPageId('1') ? 'activelink' : ''}">- #{messages['menu.1.1']}</h:commandLink>
</div>
<div id="MSchaeden" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.2')}"
styleClass="#{navigationController.isAktPageId('1.2') ? 'activelink' : ''}">- #{messages['menu.1.2']}</h:commandLink>
</div>
<div id="MTopKunden" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.3')}"
styleClass="#{navigationController.isAktPageId('1.3') ? 'activelink' : ''}">- #{messages['menu.1.3']}</h:commandLink>
</div>
<div id="MMeineDaten" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('2')}">#{messages['menu.2']}</h:commandLink>
</div>
<div id="MKundendaten" class="menuitem">
<h:commandLink action="#{navigationController.switchView('2.1')}"
styleClass="#{navigationController.isAktPageId('2.1') or navigationController.isAktPageId('2') ? 'activelink' : ''}">- #{messages['menu.2.1']}</h:commandLink>
</div>
<div id="MBenutzer" class="menuitem">
<h:commandLink action="#{navigationController.switchView('2.2')}"
styleClass="#{navigationController.isAktPageId('2.2') ? 'activelink' : ''}">- #{messages['menu.2.2']} </h:commandLink>
</div>
<div id="MPostfach" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('3')}"
styleClass="#{navigationController.isAktPageId('3') ? 'activelink' : ''}">(#{post.getAnzahlNeueNachrichten()}) #{messages['menu.3']} </h:commandLink>
</div>
<div id="MKommunikationsvereinb" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('4')}"
styleClass="#{navigationController.isAktPageId('4') ? 'activelink' : ''}">#{messages['menu.4']}</h:commandLink>
</div>
<div id="MAbmelden" class="hauptmenu" style="margin-top: 20px;">
<h:commandLink action="#{loginController.logout}"
value="#{messages['menu.5']}" />
</div>
</h:form>
</ui:define>
this is test.xhtml
<ui:define name="main">
<h:form id="postform">
<p:dialog id="msgdlg" dynamic="true" modal="true" widgetVar="msgdlg"
width="600" height="500">
<f:facet name="header">#{post.aktNachricht.subject}</f:facet>
<p:ajax event="close" listener="#{post.closeDlg}" />
<p:hotkey bind="esc" handler="msgdlg.hide(); " />
<ui:include src="#{post.view}" />
</p:dialog>
<p:tabView id="posttabview" activeIndex="0" cache="true">
<p:tab id="empftab" title="#{messages['post.empfangen']}"
titleStyleClass="thementab">
<p:dataTable value="#{post.empfangenList}" var="msg">
<p:column styleClass="coldatum">
<p:commandLink action="#{post.showNachricht(msg)}"
oncomplete="msgdlg.show();" update=":postform">
<h:outputText value="#{msg.datum}"
styleClass="#{msg.gelesen ? '' : 'unread'}">
<f:convertDateTime pattern="dd.MM.yyyy"
timeZone="Europe/Berlin" />
</h:outputText>
</p:commandLink>
</p:column>
<p:column>
<h:outputText value="#{msg.subject}"
styleClass="#{msg.gelesen ? '' : 'unread'}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tab id="sendtab" title="#{messages['post.gesendet']}"
titleStyleClass="thementab">
</p:tab>
</p:tabView>
<br />
<p:commandButton value="#{messages['post.neu']}" action="#{post.neu}"
update="msgdlg" oncomplete="msgdlg.show();" />
</h:form>
</ui:define>
I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.
Main page:
<?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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
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.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<style type="text/css">
.settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
</style>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
Tab page:
<?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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
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.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form id="zones" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
<f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="#form" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
<!-- if the user deselects one row deselect the main checkbox -->
<f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="#form" />
</h:selectBooleanCheckbox>
<!-- Click on table code -->
<h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
<f:param name="id" value="#{item.datacenterid}" />
</h:outputLink>
</h:column>
............
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />
<!-- New Zone -->
<h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
When I remove the ui:composition tag and I insert all the code into one page the buttons are working.
As you pointed out in one of your comments, you cannot use nested forms. You need to restructure your layout. Place your outer form around your <ul>:
<h:panelGroup id="tabs" layout="block">
<h:form prependId="false">
<ul>
...
</ul>
</h:form>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
...
</c:forEach>
</h:panelGroup>
The rest of you code should be OK. By this way you avoid nested forms.
I've this command button
<p:commandButton onclick="confirmation1.show()"
id="delFriend" title="Delete #{userFriend.profileFullname}" icon="ui-icon ui-icon-trash" >
</p:commandButton>
And this is the confirm dialog
<p:confirmDialog id="confirmDialog" message="Are you sure you want to delete this friend ?"
header="Deleting friend" severity="alert" widgetVar="confirmation1">
<p:commandButton id="confirm" value="Yes Sure" oncomplete="confirmation1.hide()"
action="#{messagesManagedBean.deleteFriend}">
<f:param value="#{profileId}" name="profileId" />
</p:commandButton>
<p:commandButton id="decline" value="Not Yet" onclick="confirmation1.hide()" type="button" />
</p:confirmDialog>
Both are inside the ui:repeat, when i click on the "Yes sure" button in the confirm dialog, it takes the profileId of the last element present in the ui:repeat list.
I tried f:param method and then tried to get the request parameters in the bean but in vain. it does the same thing.
Help needed.
thanks
EDIT
I've changed the page content to
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Styles/homepage-style.css" />
<link rel="stylesheet" type="text/css" href="../Styles/profile.css" />
<title>Shadi Bandhan | We find the best match for you</title>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="main-content">
<p:growl autoUpdate="true" />
<div id="left-pane">
<div id="profile-info-area">
<ui:insert name="profile_info_area" >
<ui:include src="profileInfoArea.xhtml" />
</ui:insert>
</div>
<div id="home-main-area">
<div id="interests-expressions-wrapper">
<div id="interests-expressions-header">
<div id="ie-heading">
Friends
</div>
</div>
<div id="interests-expressions">
<h:form id="interestExpressionsForm">
<p:confirmDialog id="confirmDialog" message="Are you sure you want to delete this friend ?"
header="Deleting friend" severity="alert" widgetVar="confirmation1">
<p:commandButton id="confirm" value="Yes Sure" oncomplete="confirmation1.hide()"
action="#{messagesManagedBean.deleteFriend(userFriend.profileId)}">
</p:commandButton>
<p:commandButton id="decline" value="Not Yet" onclick="confirmation1.hide()" type="button" />
</p:confirmDialog>
<ui:repeat id="interestsRepeator" var="userFriend" value="#{messagesManagedBean.userFriends}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div class="intExpression">
<div id="senderImg">
<img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
</div>
<div id="intExpression-area">
<div id="senderName">
<p:commandLink id="senderNameLink" styleClass="senderName" value="#{userFriend.profileFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userFriend.profileId)}"></p:commandLink>
</div>
<div id="intExpression-body">
#{userFriend.profileAge} <br />
#{userFriend.profileReligion} <br />
#{userFriend.profileLocation} <br />
</div>
<div id="interest-response-area">
<p:commandButton onclick="confirmation1.show()" update=":interestExpressionsForm:confirmDialog"
id="delFriend" title="Delete #{userFriend.profileFullname}" icon="ui-icon ui-icon-trash" >
<f:param value="#{userFriend}" name="userFriend" />
</p:commandButton>
</div>
</div>
</div>
</ui:repeat>
</h:form>
</div>
</div>
</div>
</div>
<div id="right-pane">
<ui:insert name="right-pane" >
<ui:include src="right-pane.xhtml" />
</ui:insert>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
after the reply of BalusC. But it doesn't work, with the update=":interestExpressionsForm:confirmDialog"
the confirm dialog opens and then closes immediately.
Put the <p:confirmDialog> outside the <ui:repeat>. You need only one, not multiple. Just ajax-update the dialog's content accordingly based on the pressed button.