[英]JSF update/re-render ui:repeat data with ajax
I've this search.xhtml page having some attributes in a form. 我有这个search.xhtml页面,它在表单中具有一些属性。 There's a search button which brings a list from the db through a method in the backing bean. 有一个搜索按钮,该按钮通过后备Bean中的方法从数据库中获取列表。 The list, I'm using in ui:repeat. 我在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. 现在,当用户单击搜索按钮时,我希望视图(xhtml)中的列表和数据进行ajax更新。
So far, i've tried this. 到目前为止,我已经尝试过了。 My search.xhtml page 我的search.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: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. 在SO上搜索了数小时,但无法弄清楚该怎么做。 Using JSF 2.0, Primefaces 3.3, Hibernate 3 使用JSF 2.0,Primefaces 3.3,Hibernate 3
Thanks 谢谢
You are mixing primefaces and core JSF approaches. 您正在混合使用Primeface和核心JSF方法。 Try to stick to primefaces to begin with and replace 尝试坚持使用素数开头和替换
<p:commandButton id="search" onclick="callme();" value="Search" actionListener="#{searchManagedBean.searchExactMatch2}" styleClass="p-search-btn" >
<f:ajax render=":searchResultsForm" />
</p:commandButton>
with 与
<p:commandButton id="search" onclick="callme();return true;" value="Search" actionListener="#{searchManagedBean.searchExactMatch2}" styleClass="p-search-btn" update=":searchResultsForm"/>
I have added return true to onclick to make sure the event won't be ignored and used update
attribute instead of f:ajax
tag. 我在onclick上添加了return true,以确保不会忽略该事件,并使用update
属性代替f:ajax
标签。 I'm not 100% sure about the colon in primefaces update
, you may also try without it. 我不太确定Primefaces update
的冒号,您也可以尝试不使用它。
Replace ui:repeat by c:forEach 用c:forEach替换ui:repeat
Old: 旧:
<ui:repeat id="userSearchResults" var="user" value="#{searchManagedBean.searchResults}">
..
</ui:repeat>
New: 新:
<c:forEach id="userSearchResults" var="user" items="#{searchManagedBean.searchResults}" >
..
</c:forEach>
Namespace definition for c:forEach : c:forEach的命名空间定义:
xmlns:c="http://java.sun.com/jsp/jstl/core"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.