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?
Related
I want to develop a JSF Page with primefaces. I have an index.xhtml which has an included ui composition component. On my page every primefaces component does not load the primefaces components and the css files.
If I load my page I get the browser error:
Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:1
developer.xhtml:4 Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:4
developer.xhtml:4 Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:4
developer.xhtml:5 Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:5
developer.xhtml:5 Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:5
developer.xhtml:5 Uncaught ReferenceError: PrimeFaces is not defined
at developer.xhtml:5
developer.xhtml:9 Uncaught ReferenceError: $ is not defined
at developer.xhtml:9
The browser shows the following source:
<input id="j_idt2" name="j_idt2" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="j_idt2_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt2",{id:"j_idt2"});</script>
<div class="boxing">
<div class="buttons"><button id="j_idt4" name="j_idt4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PrimeFaces.ab({s:"j_idt4"});return false;" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-star"></span><span class="ui-button-text ui-c">speichern</span></button><script id="j_idt4_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt4",{id:"j_idt4"});</script><button id="j_idt5" name="j_idt5" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PrimeFaces.ab({s:"j_idt5"});return false;" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-star"></span><span class="ui-button-text ui-c">löschen</span></button><script id="j_idt5_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt5",{id:"j_idt5"});</script>
</div><table id="j_idt7" class="ui-panelgrid ui-widget developeredit" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell">name</td><td role="gridcell" class="ui-panelgrid-cell"><input id="j_idt9" name="j_idt9" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all developerinput" /><script id="j_idt9_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt9",{id:"j_idt9"});</script></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell">webseite</td><td role="gridcell" class="ui-panelgrid-cell"><input id="j_idt11" name="j_idt11" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all developerinput" /><script id="j_idt11_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt11",{id:"j_idt11"});</script></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell">Gründungsjahr</td><td role="gridcell" class="ui-panelgrid-cell"><input id="j_idt13" name="j_idt13" type="text" value="0.0" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all developerinput" /><script id="j_idt13_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt13",{id:"j_idt13"});</script></td></tr></tbody></table>
</div>
<div class="boxing2"><div id="j_idt15" class="ui-datatable ui-widget ui-datatable-scrollable developerchoose"><div class="ui-datatable-header ui-widget-header ui-corner-top">
Developer
</div><div class="ui-widget-header ui-datatable-scrollable-header"><div class="ui-datatable-scrollable-header-box"><table role="grid"><thead id="j_idt15_head"><tr role="row"><th id="j_idt15:j_idt19" class="ui-state-default" role="columnheader" aria-label="name"><span class="ui-column-title">name</span></th></tr></thead></table></div></div><div class="ui-datatable-scrollable-body" tabindex="-1"><table role="grid"><tbody id="j_idt15_data" class="ui-datatable-data ui-widget-content" tabindex="0"><tr class="ui-widget-content ui-datatable-empty-message"><td colspan="1">No records found.</td></tr></tbody></table></div><div class="ui-widget-header ui-datatable-scrollable-footer"><div class="ui-datatable-scrollable-footer-box"><table role="grid"></table></div></div><input type="hidden" id="j_idt15_selection" name="j_idt15_selection" autocomplete="off" value="0" /><input type="hidden" id="j_idt15_scrollState" name="j_idt15_scrollState" autocomplete="off" value="0,0" /></div><script id="j_idt15_s" type="text/javascript">$(function(){PrimeFaces.cw("DataTable","widget_j_idt15",{id:"j_idt15",selectionMode:"single",scrollable:true,liveScroll:false,scrollStep:0,scrollLimit:0,liveScrollBuffer:0,behaviors:{rowUnselect:function(ext,event) {PrimeFaces.ab({s:"j_idt15",e:"rowUnselect",p:"j_idt15"},ext);},rowSelect:function(ext,event) {PrimeFaces.ab({s:"j_idt15",e:"rowSelect",p:"j_idt15"},ext);}}});});</script>
</div>
My code looks so:
index.xhtml:
<?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:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet name="css/index.css"></h:outputStylesheet>
<h:outputStylesheet name="css/developer.css"></h:outputStylesheet>
</h:head>
<h:body>
<h:form id = "overview">
<p:growl id="msgs" showDetail="true" />
<div id="page">
<div id="seperator">
Launchrada
</div>
<div class="ordner" id="menubox">
<p:menu id="menu" styleClass="box">
<p:submenu label="Ressources">
<p:menuitem value="Developer"></p:menuitem>
<p:menuitem value="Publisher"></p:menuitem>
<p:menuitem value="Plattform"></p:menuitem>
<p:menuitem value="Language"></p:menuitem>
<p:menuitem value="Genre"></p:menuitem>
</p:submenu>
<p:submenu label="Game">
<p:menuitem value="Game Creation"></p:menuitem>
<p:menuitem value="Game Editing"></p:menuitem>
</p:submenu>
</p:menu>
<div id="content" class="box">
<ui:include src = "/developer.xhtml" />
</div>
</div>
</div>
</h:form>
</h:body>
</html>
The ui composition file looks like this:
<ui:composition 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">
<p:inputText rendered="false" />
<p:inputText />
<div class="boxing">
<div class="buttons">
<p:commandButton value="speichern" icon="ui-icon-star" actionListener="#{developerBean.save}">
</p:commandButton>
<p:commandButton value="löschen" icon="ui-icon-star" actionListener="#{developerBean.delete}">
</p:commandButton>
</div>
<p:panelGrid columns="2" styleClass="developeredit">
<h:outputText value="name"/>
<p:inputText styleClass="developerinput" value="#{developerBean.selectedDeveloper.name}"/>
<h:outputText value="webseite"/>
<p:inputText styleClass="developerinput" value="#{developerBean.selectedDeveloper.website}"/>
<h:outputText value="Gründungsjahr"/>
<p:inputText styleClass="developerinput" value="#{developerBean.selectedDeveloper.foundingdate}"/>
</p:panelGrid>
</div>
<div class="boxing2">
<p:dataTable styleClass="developerchoose" var="dev" value="#{developerBean.developerDTOList}"
selectionMode="single" rowKey="#{dev.id}" selection="#{developerBean.selectedDeveloper}"
scrollable="true">
<f:facet name="header">
Developer
</f:facet>
<p:ajax event="rowSelect" listener="#{developerBean.onRowSelect}"/>
<p:ajax event="rowUnselect" listener="#{developerBean.onRowUnselect}"/>
<p:column headerText="Id" rendered="false">
<h:outputText value="#{dev.id}"/>
</p:column>
<p:column headerText="name">
<h:outputText value="#{dev.name}"/>
</p:column>
</p:dataTable>
</div>
</ui:composition>
This is my xhtml login page ...
<div id="externalborderReg">
<p:spacer height="70px" />
<div id="loginForm" >
<h:form id="login" onsubmit="document.getElementById('login').action='j_security_check';" prependId="false">
<h:panelGrid columns="2">
<p:outputLabel for="j_username" value="Email:" />
<p:inputText id="j_username" name="j_username" placeholder="Email" required="true"/>
<p:outputLabel for="j_password" value="Password:" />
<p:password id="j_password" name="j_password" placeholder="Password" required="true" />
</h:panelGrid>
<p:spacer height="40px"/>
<div id="loginButton">
<p:commandButton id="submit" value="Login" ajax="false" />
</div>
</h:form>
</div>
</div>
Now i want to make the p:commandButton a h:commandLink but if i try change it the login button/link stops working ... how can i cahnge it???
Please help me ...
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'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>
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.