ansaurus

Question

JSF 2.0 AJAX: jsf.ajax.request to call method not only rerender an area of page

Answer 1

A:

Hi, 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

No need to use raw javascript, you can use . Plus instead of worrying about Car id and all, just send it completely to backing bean.

here is a sample example:

The Car class:

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;
    }
}

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"));
    }
}

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"&gt;
    <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.

nash 2010-04-24 14:28:23

Answer 2

A:

I haven't tested myself, but I'd suggest you try something like this (assuming your class CarTree is @Named and, therefore, can be referred to inside the JSF page using the name carTree):

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

I think the contents of the action property in the <h:commandLink /> can also be coded as the listener property in the <f:ajax /> tag. Don't know if there's any difference...

If you don't want to use <h:commandLink /> you could replace it with <h:outputText /> and add the property event="click" to the <f:ajax /> tag. I think that would work as well. In this case, the method call would have to be in the listener property of the <f:ajax /> tag.

Vítor Souza 2010-06-11 14:41:11

ansaurus

tags:

views:

answers:

JSF 2.0 AJAX: jsf.ajax.request to call method not only rerender an area of page

related questions