I've this search.xhtml page having some attributes in a form. There's a search button which brings a list from the db through a method in the backing bean. The list, I'm using in ui:repeat. Now, when the user clicks the search button, i want the list and the data in the view(xhtml) to be ajax updated.
So far, i've tried this. My search.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"
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>
<script src="../jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// all the code goes here! including functions!!!
$('#loading').fadeOut();
$('div#searchResults').hide();
$('div#searchResults').fadeIn(3000);
// $('div#searchResults').fadeIn(3000);
function callme(){
$('#loading').fadeIn(3000);
$('div#searchResults').fadeOut(1000);
$('div#searchResults').fadeIn();
}
function showLoading(){
$('#loading')
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
});
</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="../#{myProfileManagedBean.profileImgPath}" width="185" height="200" />
</span>
<center>
<p:commandButton type="submit" value="Upload Photo" action="#{profileAlbumManagedBean.getUserAlbum}" styleClass="upload-photo-btn" />
</center>
<p:commandLink value="My Photos" action="#{profileAlbumManagedBean.getUserAlbum}" /> <br />
<a href="friends.xhtml">My Friends</a> <br />
<a href="planPackages.xhtml">My Packages</a> <br />
<p:commandLink value="Privacy Settings" action="#{myProfileManagedBean.getProfileSetting}" /> <br />
<a href="#">FAQs</a>
</div>
<div id="pesonal-attributes">
<h:form id="searchForm2">
<table width="190" height="200" border="0">
<tr>
<td>Age:</td>
<td><select name="select" class="search-select" >
<option>18-22</option>
</select></td>
</tr>
<tr>
<td>Religion:</td>
<td><select name="select2" class="search-select" >
<option>Islam</option>
</select></td>
</tr>
<tr>
<td>Cast:</td>
<td><select name="select3" class="search-select" >
<option>Malik</option>
</select></td>
</tr>
<tr>
<td>Country:</td>
<td><select name="select4" class="search-select" >
<option>Pakistan</option>
</select></td>
</tr>
<tr>
<td>City:</td>
<td><select name="select5" class="search-select" >
<option>18-22</option>
</select></td>
</tr>
<tr>
<td>Gender:</td>
<td><select name="select6" class="search-select" >
<option>18-22</option>
</select></td>
</tr>
<tr>
<td>Education</td>
<td><select name="select7" class="search-select" >
<option>18-22</option>
</select></td>
</tr>
<tr>
<td>Marital Status</td>
<td><select name="select8" class="search-select" >
<option>Single</option>
</select></td>
</tr>
<tr>
<td>Interests</td>
<td><select name="select9" class="search-select">
<option>Reading</option>
</select></td>
</tr>
<tr>
<td>Family</td>
<td><select name="select10" class="search-select" >
<option>Simple</option>
</select></td>
</tr>
<tr>
<td>Occupation</td>
<td><select name="select11" class="search-select" >
<option>Doctor</option>
</select></td>
</tr>
<tr>
<td>
<p:commandButton id="search" onclick="callme();" value="Search" actionListener="#{searchManagedBean.searchExactMatch2}" styleClass="p-search-btn" >
<f:ajax render=":searchResultsForm" />
</p:commandButton>
</td>
<td>
<p:commandButton value="Reset" styleClass="p-search-btn" />
</td>
</tr>
</table>
</h:form>
</div>
</div>
<div id="home-main-area">
<div id="interests-expressions-wrapper">
<div id="interests-expressions-header">
<div id="search-heading">
Search Matches
</div>
<div id="m-search">
<div id="loading">
<p>Please wait while we search</p><img src="../images/loading.gif" width="30" height="30" />
</div>
</div>
</div>
<div id="searchResults">
<h:form id="searchResultsForm">
<h:panelGroup>
<ui:repeat id="userSearchResults" var="user" value="#{searchManagedBean.searchResults}">
<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="#{user.profileFullname}" action="#{myProfileManagedBean.getOtherProfileInfo(userFriend.profileId)}"></p:commandLink>
</div>
<div id="intExpression-body">
#{user.profileAge} <br />
#{user.profileReligion} <br />
#{user.profileLocation} <br />
</div>
</div>
</div>
</ui:repeat>
</h:panelGroup>
<p:blockUI block="userSearchResults" trigger=":searchForm2:search" />
</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>
Searched for hours on SO, but just couldn't figure out how to do it. Using JSF 2.0, Primefaces 3.3, Hibernate 3
Thanks
