jsf => Интеграция Ajax

Частично обновить представление

Делает запрос ajax и обновляет только часть представления.

Bean.java

@ManagedBean
@ViewScoped
public class Bean {

    public Date getCurrentDate() {
        return new Date();
    }

}

sample.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <h:commandButton value="Execute ajax">
            <f:ajax render="output" />
        </h:commandButton>
        <p>
            <h:outputText id="output" value="Ajax date: #{bean.currentDate}" />
        </p>
        <p>
            <h:outputText id="output2" value="Non-Ajax date: #{bean.currentDate}" />
        </p>
    </h:form>
</h:body>
</html>

Отправьте детали формы и послушайте запрос

Делает запрос только отправкой части формы. Значение text1 устанавливается, но не text2 , поскольку состояние прослушивателя.

Bean.java

@ManagedBean
@ViewScoped
public class Bean {

    private String text1;

    private String text2;

    public String getText1() {
        return text1;
    }

    public void setText1(String text1) {
        this.text1 = text1;
    }

    public String getText2() {
        return text2;
    }

    public void setText2(String text2) {
        this.text2 = text2;
    }

    public void listener() {
        System.out.println("values: " + text1 + " " + text2);
    }

}

sample.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <h:inputText id="my_input" value="#{bean.text1}" />
        <h:inputText value="#{bean.text2}" />
        <h:commandButton value="Execute ajax">
            <f:ajax execute="@this my_input" listener="#{bean.listener}" />
        </h:commandButton>
    </h:form>
</h:body>
</html>

Ajax на javascript событии

Дата обновляется всякий раз, когда пользователь вводит в поле ввода:

Bean.java

@ManagedBean
@ViewScoped
public class Bean {
    
    public Date getCurrentDate(){
        return new Date();
    }

}

sample.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <h:inputText>
            <f:ajax event="keyup" render="output" />
        </h:inputText>
        <p>
            <h:outputText id="output" value="Ajax date: #{bean.currentDate}" />
        </p>
    </h:form>
</h:body>
</html>

задержка

Выполняет запросы с указанной задержкой в миллисекундах, а это означает, что если какой-либо последующий запрос произойдет после того, как предыдущий был поставлен в очередь, первый будет пропущен. Эта функция доступна с JSF 2.2:

Bean.java

@ManagedBean
@ViewScoped
public class Bean {
    
    public Date getCurrentDate(){
        return new Date();
    }

}

sample.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <h:inputText>
            <f:ajax event="keyup" render="output" delay="2000" />
        </h:inputText>
        <p>
            <h:outputText id="output" value="Ajax date: #{bean.currentDate}" />
        </p>
    </h:form>
</h:body>
</html>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

jsf
Интеграция Ajax

Поиск…

Частично обновить представление

Отправьте детали формы и послушайте запрос

Ajax на javascript событии

задержка