JSF 2.0 AJAX：jsf.ajax.request调用方法不仅重新呈现页面的一个区域 [英] JSF 2.0 AJAX: jsf.ajax.request to call method not only rerender an area of page
问题描述
我在寻找的以下问题一个soultion： 用英语翻译是不同类型汽车的链接列表。 用英语翻译用户可以点击列表中的每节车厢和一个Ajax请求应被发送。 Ajax请求的响应用英语翻译应该是依赖于（每车）的ID，并显示在panelGroup中。
I'm looking for a soultion of the following problem: _The is a list of links with different types of cars. _The user can click on each car in the list and a ajax request should be sent. _The response of the ajax request should be dependent on the id (of each car) and displayed in an panelGroup.
所以，我需要的是一种可能性，呼吁支持bean的方法。此外，该方法应被调用与一辆汽车id作为其参数。
So what I need is a possibility to call a method on the backing-bean. Additionally, this method should be called with a car id as its parameter.
我的code到目前为止是这样的：
My code so far looks like:
...
function showDetails(detailsFor){
jsf.ajax.request(this, event, {render: 'form1:carDetails'});
}
...
<ul>
<ui:repeat value="#{carTree.getCars)}" var="car">
<h:outputScript name="jsf.js" library="javax.faces" target="head" />
<li onclick="showDetails(#{car.id});">#{car.name}</li>
</ui:repeat>
</ul>
...
<h:panelGroup id="carDetails" layout="block" style="float:left;">
// need the details of each 'selected /clicked' car here
</h:panelGroup>
...
而在支持bean的方法应该是这样的：
And the method in the backing bean should look like:
public class CarTree {
...
public String getCarDetails(int carid){
return "The car details for the car id "+carid+" are......";
}
...
}
我不知道如何使用新的JSF 2.0 AJAX功能调用的方法。请帮我...
I've no idea how to call a method by using the new JSF 2.0 AJAX functionality. Please, help me...
推荐答案
使用f：setPropertyActionListener从JSF页面中的对象传递到后端。当您使用可重复的组件，如数据表中这个标签是非常有用的。
Use f:setPropertyActionListener to pass a object from JSF page to your backend. This tag is especially useful when you are using repeatable components like datatable
没有必要使用原始的JavaScript，你可以使用＆lt; F：AJAX />。而不是担心车辆ID，所有加，只是完全将其发送到后台bean。
No need to use raw JavaScript, you can use <f:ajax />. Plus instead of worrying about Car id and all, just send it completely to backing bean.
下面是一个简单的例子：
Here is a sample example:
汽车类：
public class Car {
int id;
String brand;
String color;
public Car(int id, String brand, String color) {
this.id = id;
this.brand = brand;
this.color = color;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public String getBrand() {
return brand;
}
public void setBrand(String brand) {
this.brand = brand;
}
}
在CarTree类：
The CarTree class:
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "CarTree")
@RequestScoped
public class CarTree {
List<Car> carList;
Car selectedCar;
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
public List<Car> getCars() {
return carList;
}
public void setCars(List<Car> carList) {
this.carList = carList;
}
public CarTree() {
carList = new ArrayList<Car>();
carList.add(new Car(1, "jaguar", "grey"));
carList.add(new Car(2, "ferari", "red"));
carList.add(new Car(3, "camri", "steel"));
}
}
JSF页面：
The JSF 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body id="mainBody">
<h:form id="carForm">
<h:dataTable value="#{CarTree.cars}" var="car">
<h:column>
<h:outputText value="#{car.id}"/>
</h:column>
<h:column>
<h:outputText value="#{car.brand}"/>
</h:column>
<h:column>
<h:outputText value="#{car.color}"/>
</h:column>
<h:column>
<h:commandButton value="Show Car Detail" >
<f:setPropertyActionListener target="#{CarTree.selectedCar}" value="#{car}"/>
<f:ajax render=":carForm:carDetails" />
</h:commandButton>
</h:column>
</h:dataTable>
<h:panelGroup id="carDetails" layout="block" style="float:left;">
<h:outputText value="#{CarTree.selectedCar.id}" />
<h:outputText value="#{CarTree.selectedCar.brand}" />
<h:outputText value="#{CarTree.selectedCar.color}" />
</h:panelGroup>
</h:form>
</h:body>
</html>
希望这有助于。
Hope this helps.
这篇关于JSF 2.0 AJAX：jsf.ajax.request调用方法不仅重新呈现页面的一个区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
