I’ve a list of messages in the backing bean which i’m using in a ui:repeat tag to display on the xhtml page.
<?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" >
<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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#openMessage").hide();
});
function openMessage(id){
//$("div#openMessage").slideDown(4000);
alert(id);
}
</script>
</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">
<div id="profile-info">
<span>
<img class="profileImg" src="../images/profileImg.jpg" width="185" height="200" />
</span>
<img class="request-btn" src="../images/request_photo_btn.jpg" height="35" width="156"/>
<a href="sentMessages.xhtml">Sent box</a> <br />
<a href="#">Drafts</a> <br />
<a href="#">My Packages</a> <br />
<a href="#">Other Settings</a> <br />
<a href="#">FAQs</a>
</div>
</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">
<a href="#"> + New Message </a>
</div>-->
</div>
</div>
<h:form id="messagesForm">
<div id="messages">
<p:dialog id="messagesDialog" modal="true" widgetVar="messageDialog" resizable="false" width="750" height="200" 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>
<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div class="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>
<div class="message-txt">
#{userMsg.message}
</div>
<div id="msgAction">
<!-- <a href="#" onclick="messageDialog.show()">Reply</a>-->
<p:commandLink styleClass="reply-btn" value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
<p:commandLink styleClass="open-btn" value="Open" onclick="openMessage(#{userMsg.userId})">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</div>
<div id="openMessage">
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
</div>
</div>
</div>
</ui:repeat>
<center>
<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}"/>
</center>
</div>
</h:form>
</div>
</div>
</div>
<div id="right-pane">
<div id="right-vline">
<img class="v-differenciator" src="../images/differentiator.jpg" />
</div>
<div id="right-suggestions-top">
<center>
<p>Profiles you may like</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="right-suggestions-bottom">
<center>
<p>People Who might be Interested in you</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="fb-twitter-icons" >
<img class="fb-icon" src="../images/fb-icon.jpg" />
<img class="twitter-icon" src="../images/twitter-icon.jpg" />
</div>
<div id="fb-twitter-labels">
<h:outputLabel style="color: #680B0C;font-weight: bold;" value="Share & likes"/>
</div>
<div id="text-info-profile" >
<b>Want to know why you are still single?</b>
<p>
We understand it is not easy to find a suitable match,ShadiBandhan.com provides safe plateform to find your ideal match.
</p>
<a href="#">[Read More..]</a>
</div>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Now,
I want that
- The messages currently showing on the main page will be like “hello
its my…” and - when a person clicks on the open, a div is slided down, in which
there will be full message shown and a reply and close button.
I’m using primefaces, if there’s a control in primefaces which i can use to achieve this whole thingy, please let me know. I thought of creating dynamic div id’s but didn’t know how to make it work, that’s why posting here…
Any suggestions are appreciated.
Give those elements a classname. Element IDs must be unique throughout the document and JSF-generated IDs are clumsy to select in jQuery. A classname can be used on multiple elements and it’s easier to select in jQuery.
Something like this
with this CSS
and this JS