JSF更新/重新呈现ui：使用ajax重复数据
我看到这个search.xhtml页面在表单中有一些属性。 有一个搜索按钮，它通过支持bean中的一个方法从数据库中获取一个列表。 我在ui中使用的列表：重复。 现在，当用户单击搜索按钮时，我希望列表和视图中的数据（xhtml）被ajax更新 到目前为止，我已经试过了。我的search.xhtml页面JSF更新/重新呈现ui：使用ajax重复数据,ajax,jsf,primefaces,Ajax,Jsf,Primefaces,我看到这个search.xhtml页面在表单中有一些属性。 有一个搜索按钮，它通过支持bean中的一个方法从数据库中获取一个列表。 我在ui中使用的列表：重复。 现在，当用户单击搜索按钮时，我希望列表和视图中的数据（xhtml）被ajax更新 到目前为止，我已经试过了。我的search.xhtml页面 <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<?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>
Shadi Bandhan |我们找到最适合你的
$（文档）.ready（函数（）{
//所有的代码都在这里！包括函数！！！
$（“#加载”）.fadeOut（）；
$（'div#searchResults'）.hide（）；
$（'div#searchResults'）.fadeIn（3000）；
//$（'div#searchResults'）.fadeIn（3000）；
函数callme（）{
$（'加载'）.fadeIn（3000）；
$（'div#searchResults'）。淡出（1000）；
$（'div#searchResults'）.fadeIn（）；
}
函数showLoading（）{
$（“#加载”）
.css（{可见性：“可见”}）
.css（{opacity:“1”}）
.css（{display:“block”}）
;
}
});
年龄：
18-22
宗教：
伊斯兰教
演员阵容：
马利克
国家：
巴基斯坦
城市：
18-22
性别：
18-22
教育类
18-22
婚姻状况
单身
兴趣
阅读
家庭
简单的
职业
医生
搜索匹配项
我们正在搜索，请稍候
<p:commandButton id="search" onclick="callme();" value="Search" actionListener="#{searchManagedBean.searchExactMatch2}" styleClass="p-search-btn" >
<f:ajax render=":searchResultsForm" />
</p:commandButton>
<p:commandButton id="search" onclick="callme();return true;" value="Search" actionListener="#{searchManagedBean.searchExactMatch2}" styleClass="p-search-btn" update=":searchResultsForm"/>
<ui:repeat id="userSearchResults" var="user" value="#{searchManagedBean.searchResults}">
..
</ui:repeat>
<c:forEach id="userSearchResults" var="user" items="#{searchManagedBean.searchResults}" >
..
</c:forEach>
xmlns:c="http://java.sun.com/jsp/jstl/core"