jsf => Intégration Ajax

Mettre à jour partiellement la vue

Effectue une requête ajax et ne met à jour qu'une partie de la vue.

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>

Envoyer des pièces de formulaire et écouter la demande

Fait une demande en envoyant seulement une partie du formulaire. La valeur text1 est définie, mais pas text2 , comme l'indique l'écouteur.

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 sur un événement javascript

La date est mise à jour chaque fois que l'utilisateur tape sur le champ de saisie:

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>

Retard

Exécute les demandes avec le délai spécifié en millisecondes, ce qui signifie que si une requête ultérieure se produit après la mise en file d'attente précédente, la première sera ignorée. La fonctionnalité est disponible à partir de 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

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

jsf
Intégration Ajax

Recherche…

Mettre à jour partiellement la vue

Envoyer des pièces de formulaire et écouter la demande

Ajax sur un événement javascript

Retard