Soumettre le formulaire vs ajax exécuter=“@form”

Je suis en utilisant JSF2.1.

Quelle est la différence entre execute="@form" et this.submit() dans le code ci-dessous?

<f:ajax execute="@form" render="@form"/>

et:

<h:form onkeypress="if (event.keyCode == 13) this.submit();">

Le premier semble présenter les valeurs et les rendre à nouveau la forme, alors que ce dernier provoque un rafraichissement de la page. Est-il possible d'utiliser ajax lorsque la touche entrée est enfoncée dans le formulaire? Je suis en train d'essayer de détecter la touche enter enfoncée dans un inputText boîte. J'ai essayé des choses comme ceci:

<h:inputText value="#{a.name}" >
  <f:ajax execute="@this" />
</h:inputText>

mais cette juste cause les valeurs à être soumis lorsque vous cliquez sur quelque chose d'autre (après valueChange).

OriginalL'auteur taylordurden | 2014-01-31

  1. 4

    Afin de répondre à votre question du titre, la différence entre eux est que la soumission d'un formulaire envoie l'ensemble de la forme et de la recharge de la vue, tout en ajax forme d'exécution soumet aussi à l'ensemble de la forme, mais à l'aide d'une requête ajax qui peut être utilisé pour effectuer le rendu d'une partie de la vue avant de la réponse arrive.

    En ce qui concerne votre question de contenu, de le soumettre le formulaire en appuyant sur Entrée clé est mis en œuvre dans les principaux navigateurs pour d'entrée unique des formes. Il n'y a pas besoin de javascripting la onkeypress événement, comme le navigateur détecte et envoyer le formulaire par défaut.

    Donc le code suivant dans la pièce a le même résultat pour le côté serveur, soit en appuyant sur la Envoyer ou sur le bouton Entrée clé: La value attribut. Notez que dans la deuxième forme, où la <h:inputText /> a un ajax comportement, la h:outputText valeur est également mise à jour (même pas spécifié un render attribut) lors de la frappe de l' Entrée, c'est à cause de la pleine soumettre la demande de priorité sur la requête ajax et l'ensemble de la page est rechargée. Seul Google Chrome semble dire au sujet de ce conflit: httpError:Le Transport Http retourné 0 code d'état. C'est généralement le résultat du mélange de l'ajax et des requêtes complètes.

    Demande complète:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}" />
        <h:commandButton value="Send" />
    </h:form>
</body>
</html>

    Requête Ajax:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}">
            <f:ajax />
        </h:inputText>
        <h:outputText value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

    Lorsque le formulaire a plus qu'un champ de saisie vous pouvez utiliser un javascript de vérification de l'envoi du formulaire si il n'y a pas le bouton soumettre, en utilisant pleinement les soumettre sa demande. Si il y a, cela est inutile.

    Enfin, si vous souhaitez effectuer une requête ajax lors de la frappe de la touche et le modèle de mise à jour des valeurs, utilisez onkeypress attribut:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}"
            onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
            <f:ajax render="echo" />
        </h:inputText>
        <h:inputText value="#{bean.value2}" />
        <h:outputText id="echo" value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

    Rappeler que il est conseillé d'utiliser un bouton de soumission de la plaine des questions d'accessibilité,.

    Voir aussi:

    OriginalL'auteur Xtreme Biker