当前位置: 首页 > 面试题库 >

JSF 2.0 AJAX:调用方法的jsf.ajax.request不仅会重新渲染页面区域

胡禄
2023-03-14
问题内容

我正在寻找以下问题的解决方案:_The是具有不同类型汽车的链接的列表。_用户可以单击列表中的每辆车,并且应该发送ajax请求。_ajax请求的响应应取决于(每辆车的)id,并显示在panelGroup中。

因此,我需要在后备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>
...

支持bean中的方法应如下所示:

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

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


问题答案:

使用f:setPropertyActionListener将对象从JSF页面传递到您的后端。当您使用可重复使用的组件(例如数据表)时,此标签特别有用

无需使用原始JavaScript,可以使用 。另外,不必担心汽车ID和其他所有信息,只需将其完全发送到备用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>

希望这可以帮助。



 类似资料:
  • 我在一个应用程序的前端原型上工作,该应用程序具有给定的JS、React和CoreUI4 React技术栈。我来自Python背景,在网络开发和我给定的技术堆栈方面没有太多经验。当我不得不开始使用钩子时,这一点变得很明显。 问题 我真的不明白为什么它不更新我的和/或不渲染。我需要一个条件渲染,我也使用。 我试图: 从我的主应用程序中传递一个更大的状态,一旦我启动条件逻辑(挂钩规则)就无法工作。 当我

  • 尽管试图避免所有记录在案的陷阱,阻止React在状态更改后重新渲染,但我仍然无法解决我的问题: } 从每个长方体组件调用update函数,并触发长方体网格上新颜色的指定。 试图避免常见的错误: 颜色数组只有在通过扩展运算符从状态复制后才被修改 通过setState()传递新数组 此外,我还处理了两个组件中函数的实例绑定 但是,尽管onClick成功触发了状态更改,但不会进行重新渲染。我在这里缺少的

  • 本文向大家介绍vue 刷新之后 嵌套路由不变 重新渲染页面的方法,包括了vue 刷新之后 嵌套路由不变 重新渲染页面的方法的使用技巧和注意事项,需要的朋友参考一下 解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来 2、写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法

  • web-frame 模块可自定义渲染当前网页 进程: 渲染进程​ 例如放大当前页至 200%. 1 const {webFrame} = require('electron') 2 webFrame.setZoomFactor(2) Copied! 方法 webFrame.setZoomFactor(factor) 用途:设置页面的缩放系数 factor Number - 缩放系数 注意:缩放系数

  • 问题内容: 在基于多个用户上下文渲染了整个页面并提出了几个请求之后,我希望用户能够切换上下文并再次重新渲染所有内容(重新发送所有请求等)。如果我只是将用户重定向到其他地方,则一切正常: 如果使用,那么正在等待响应的请求中的某些请求将被取消,因此无法使用。此外,黑客也不起作用(什么也没有发生)。 还有另一种方法可以重新渲染页面,而无需再次手动发出所有请求吗? 问题答案: 为了进行记录,要强制angu

  • 我有一个反应组件,它是一种形式。当用户单击发送/提交按钮时,将调用一个函数来处理数据保存并执行一些其他任务。 问题是在用户单击按钮后,组件似乎重新渲染了几次(很可能是因为它从其他组件接收的外部道具更新了)。这本身不是问题。 但是,当组件更新时,即使用户没有再次单击该按钮,也会再次调用函数。 这是我不明白的部分。为什么组件更新时会触发< code>onClick函数?我该如何防止这种情况发生? 我不