JSF 2.0 AJAX：jsf.ajax.request 调用方法不仅重新渲染页面区域答案

【问题标题】：JSF 2.0 AJAX: jsf.ajax.request to call method not only rerender an area of pageJSF 2.0 AJAX：jsf.ajax.request 调用方法不仅重新渲染页面区域
【发布时间】：2011-02-11 00:55:59
【问题描述】：

我正在寻找以下问题的解决方案： _The 是不同类型汽车的链接列表。 _用户可以点击列表中的每辆车，并发送一个ajax请求。 _ajax 请求的响应应该依赖于（每辆车的）id 并显示在一个 panelGroup 中。

所以我需要的是在 backing-bean 上调用方法的可能性。此外，调用此方法时应使用汽车 ID 作为其参数。

到目前为止，我的代码如下所示：

...
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>
...

backing bean 中的方法应该是这样的：

public class CarTree {
    ...
    public String getCarDetails(int carid){
        return "The car details for the car id "+carid+" are......";
    }
    ...
}

我不知道如何使用新的 JSF 2.0 AJAX 功能调用方法。请帮帮我...

【问题讨论】：

标签： ajax jsf-2

【解决方案1】：

使用 f:setPropertyActionListener 将对象从 JSF 页面传递到您的后端。当您使用数据表等可重复组件时，此标记特别有用

无需使用原生 JavaScript，您可以使用。另外，不用担心 Car id 之类的，只需将其完全发送到 backing bean。

这是一个示例：

汽车类：

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 类：

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 页面：

<?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>

希望这会有所帮助。

【讨论】：

+1 为您的工作，但他正在使用
怎么办？

【解决方案2】：

我还没有测试过自己，但我建议你尝试这样的事情（假设你的 CarTree 类是@Named，因此可以使用名称 carTree 在 JSF 页面中引用）：

<ul>
    <ui:repeat value="#{carTree.getCars)}" var="car">
            <li><h:commandLink action="#{carTree.getCarDetails(car.id)}" value="#{car.name}">
                <f:ajax render="carDetails" />
            </h:commandLink></li>
    </ui:repeat>
</ul>
...
<h:panelGroup id="carDetails" layout="block" style="float:left;">
    // need the details of each 'selected /clicked' car here
</h:panelGroup>

我认为<h:commandLink />中action属性的内容也可以编码为<f:ajax />标签中的listener属性。不知道有没有区别...

如果您不想使用<h:commandLink />，可以将其替换为<h:outputText />，并将属性event="click" 添加到<f:ajax /> 标记中。我认为这也可以。在这种情况下，方法调用必须位于<f:ajax /> 标记的listener 属性中。

【讨论】：