Utilisation des formulaires ajax dans Drupal 8

Les plats clés

• L'API Ajax Drupal 8 permet des formulaires plus propres et conviviaux sans avoir besoin de code JavaScript. Cela peut être réalisé en ajaxifant une partie du comportement de la forme.
• La logique de validation des e-mails peut être déplacée vers un rappel Ajax, qui déclenche la validation et imprime un message sans avoir besoin de soumission de formulaire. Il s'agit d'un comportement commun sous les formes et sert de bon exercice pour comprendre Ajax dans Drupal 8.
• L'API AJAX permet la personnalisation du comportement de la forme. La méthode de rappel AJAX dans la classe de formulaire reçoit le tableau de formulaire et l'objet d'état de formulaire, effectuant la validation et renvoyant une réponse AJAX avec plusieurs commandes en fonction du résultat de validation.
• Ajax peut également être utilisé dans Drupal 8 en dehors des formulaires, comme l'ajout de la classe USE-AJAX à n'importe quel lien. Cela permet à Drupal de faire une demande ajax à l'URL dans l'attribut HREF lorsque le lien est cliqué, renvoyant les commandes AJAX et effectuant diverses actions au besoin.

Dans cet article, je vais vous montrer un moyen propre d'utiliser l'API Drupal 8 Ajax sans écrire une ligne de code JavaScript. À cette fin, nous reviendrons au premier formulaire personnalisé que nous avons construit pour Drupal 8 dans un article précédent et ajaxify une partie de son comportement pour le rendre plus convivial.

Une version mise à jour de ce formulaire peut être trouvée dans ce référentiel sous le nom Demoforme (le module de démonstration). Le code que nous écrivons dans cet article peut également y être trouvé, mais dans une branche séparée appelée Ajax. Je vous recommande de cloner le dépôt et d'installer le module dans votre environnement de développement si vous souhaitez suivre.

Demoforme

Bien que mal nommé, le démoforme a été très utile pour illustrer les bases de l'écriture d'une forme personnalisée dans Drupal 8. Il gère la validation, la configuration et illustre l'utilisation de l'API de formulaire en général. Bien sûr, il se concentre sur les bases et n'a rien de spectaculaire.

Si vous vous souvenez ou vérifiez le code, vous verrez que le formulaire présente un seul champ textuel responsable de la collecte d'une adresse e-mail à enregistrer en configuration. La validation du formulaire est chargée de s'assurer que l'e-mail soumis a une fin .com (une mauvaise tentative mais suffisamment pour illustrer le principe de validation du formulaire). Ainsi, lorsqu'un utilisateur soumet le formulaire, il enregistre une nouvelle adresse e-mail à la configuration et obtient un message de confirmation imprimé à l'écran.

Dans cet article, nous déplacerons la logique de validation de l'e-mail vers un rappel AJAX afin qu'après que l'utilisateur ait terminé la saisie de l'adresse e-mail, la validation est déclenchée automatiquement et un message imprimé sans soumettre le formulaire. Encore une fois, il n'y a rien de spectaculaire dans ce comportement et vous le verrez assez souvent sous des formes dans la nature (généralement pour valider les noms d'utilisateur). Mais c'est un bon exercice pour regarder Ajax dans Drupal 8.

Ajax Form

La première chose que nous devons faire est de déplacer la logique de validation des e-mails de la General ValidateForm () vers une méthode qui ne gère que cet aspect:

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

Comme vous pouvez le remarquer, nous avons également changé un peu la logique pour nous assurer que l'adresse e-mail se termine par un .com.

Ensuite, nous pouvons nous remettre à cette logique à partir de la méthode de validation principale pour nous assurer que notre comportement existant fonctionne toujours:

<span>/**
</span><span> * <span>{@inheritdoc}
</span></span><span> */
</span><span>public function validateForm(array &$form, FormStateInterface $form_state) {
</span>  <span>// Validate email.
</span>  <span>if (!$this->validateEmail($form, $form_state)) {
</span>    <span>$form_state->setErrorByName('email', $this->t('This is not a .com email address.'));
</span>  <span>}
</span><span>}</span>

De cette façon, même si notre formulaire est en quelque sorte soumis (programmatique ou autre), la validation sera toujours exécutée.

Ensuite, nous devons nous tourner vers la définition de notre formulaire, en particulier le champ de messagerie, et le faire déclencher des demandes AJAX en fonction d'une interaction utilisateur. Ce sera l'acte d'un utilisateur modifiant la valeur du champ et en supprimant la focalisation:

<span>$form['email'] = array(
</span>  <span>'#type' => 'email',
</span>  <span>'#title' => $this->t('Your .com email address.'),
</span>  <span>'#default_value' => $config->get('demo.email_address'),
</span>  <span>'#ajax' => [
</span>    <span>'callback' => array($this, 'validateEmailAjax'),
</span>    <span>'event' => 'change',
</span>    <span>'progress' => array(
</span>      <span>'type' => 'throbber',
</span>      <span>'message' => t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' => '<span ></span>'
</span><span>);</span>

Ce que nous avons fait de nouveau ici, c'est ajouter la clé #Ajax au tableau avec certaines des clés pertinentes. De plus, nous avons ajouté un peu de balisage après l'élément de formulaire en tant que wrapper pour un court message concernant la validité de l'e-mail.

Le rappel à l'intérieur du tableau #Ajax pointe vers une méthode à l'intérieur de notre classe de formulaire (validateMailaJax ()) tandis que l'événement ajoute une liaison JavaScript à cet élément de formulaire pour l'événement de changement jQuery. Alternativement, vous pouvez également spécifier une clé de chemin au lieu d'un rappel, mais dans notre cas, cela signifierait avoir également à configurer un itinéraire et un contrôleur qui semble redondant. Et nous ne voulons pas de la clé de wrapper parce que nous n'avons pas l'intention de remplir une zone de contenu retourné, mais nous voulons amener les actions qui résultent du rappel. Pour cela, nous utiliserons les commandes ajax.

Pour en savoir plus sur tout cela, je vous encourage à consulter la page API AJAX ou l'entrée de l'API du formulaire pour AJAX. Il existe une poignée d'autres options que vous pouvez utiliser pour personnaliser davantage le comportement de l'Ajax de vos éléments de forme.

Il est maintenant temps d'écrire la méthode de rappel à l'intérieur de notre classe de formulaire. Cela reçoit le tableau $ formulaire et l'objet $ form_state comme des arguments provenant du formulaire qui a déclenché la demande AJAX:

<span>/**
</span><span> * Ajax callback to validate the email field.
</span><span> */
</span><span>public function validateEmailAjax(array &$form, FormStateInterface $form_state) {
</span>  <span>$valid = $this->validateEmail($form, $form_state);
</span>  <span>$response = new AjaxResponse();
</span>  <span>if ($valid) {
</span>    <span>$css = ['border' => '1px solid green'];
</span>    <span>$message = $this->t('Email ok.');
</span>  <span>}
</span>  <span>else {
</span>    <span>$css = ['border' => '1px solid red'];
</span>    <span>$message = $this->t('Email not valid.');
</span>  <span>}
</span>  <span>$response->addCommand(new CssCommand('#edit-email', $css));
</span>  <span>$response->addCommand(new HtmlCommand('.email-valid-message', $message));
</span>  <span>return $response;
</span><span>}</span>

Autrement dit, dans cette méthode, nous effectuons la validation et renvoyons une réponse AJAX avec plusieurs commandes qui diffèrent en fonction du résultat de validation. Avec le CSSCommand, nous appliquons un CSS directement à l'élément de formulaire de messagerie tandis qu'avec le HTMLCommand, nous remplaçons le contenu du sélecteur spécifié (rappelez-vous le suffixe de notre élément de formulaire?).

Ces commandes mappent à peu près les fonctions jQuery afin qu'elles soient assez faciles à saisir. Vous pouvez trouver une liste de toutes les commandes disponibles sur cette page. Et puisque nous utilisons trois nouvelles classes à l'intérieur de cette méthode, nous devons nous rappeler également de les utiliser en haut:

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

Et c'est à peu près tout. Si vous effacez le cache et rechargez votre formulaire, la saisie dans le champ de messagerie et la suppression de l'objectif déclenchera le rappel pour valider l'adresse e-mail. Vous remarquerez l'icône Little Throbber là-bas (qui peut être modifiée dans la définition) et le message court que nous avons également défini. Une Correct L'adresse e-mail doit mettre en évidence le champ en vert et imprimer le message OK tandis qu'au contraire, la couleur rouge est utilisée avec un message opposé.

Si nous avions spécifié un emballage dans la définition de l'élément de forme, nous aurions pu renvoyer un contenu (ou un tableau de rendu) qui aurait été placé à l'intérieur de ce sélecteur. Vous avez donc la possibilité de choisir entre le retour des commandes de contenu ou AJAX, mais je recommande ce dernier pour la plupart des cas car ils offrent un comportement plus flexible (et cohérent).

Conclusion

Dans cet article, nous avons vu un exemple d'utilisation de l'Ajax pour améliorer notre forme et le rendre plus convivial pour les utilisateurs finaux. Et nous avons écrit exactement zéro lignes de JavaScript pour accomplir cela.

Dans notre cas, c'est vraiment une question de préférence ou Fancification . Mais si vous traitez avec un formulaire de 20 champs qui a une validation sur plusieurs champs similaires à celui-ci, l'utilisation de l'Ajax est vraiment logique. Cela n'ennuie pas les utilisateurs d'avoir à soumettre le formulaire uniquement pour réaliser que leur entrée n'est pas valide.

Bien que les formulaires soient le principal domaine où vous verrez Ajax dans Drupal 8, il existe quelques autres façons de le tirer parti sans écrire JavaScript.

Une fois que la manière agréable est d'ajouter la classe Use-Ajax sur n'importe quel lien. Cela aura Drupal faire une demande AJAX à l'URL dans l'attribut HREF chaque fois que le lien est cliqué. À partir du rappel, vous pouvez retourner les commandes AJAX et effectuer diverses actions selon les besoins. Mais gardez à l'esprit que JQuery et d'autres scripts de base ne sont pas chargés sur toutes les pages pour les utilisateurs anonymes (donc Ajax se dégradera gracieusement en comportement de lien régulier). Assurez-vous donc d'inclure ces scripts pour les utilisateurs anonymes si vous avez besoin de ce comportement.

Des questions fréquemment posées sur l'utilisation de l'Ajax dans Drupal 8 formulaires

Comment puis-je implémenter AJAX dans les formulaires Drupal 8?

L'implémentation de AJAX dans Drupal 8 Formes implique quelques étapes. Tout d'abord, vous devez définir un formulaire qui comprend un rappel AJAX. Cela peut être fait dans la méthode Buildform du formulaire. La propriété «#Ajax» doit être ajoutée à l'élément de formulaire qui déclenchera la demande AJAX. Cette propriété est un tableau qui inclut la touche «rappel», qui spécifie la méthode à appeler lorsque l'élément de formulaire est déclenché. La méthode de rappel doit renvoyer un objet de réponse Ajax qui définit ce qui doit être mis à jour sur la page.

Quelles sont les commandes de rappel AJAX dans Drupal 8?

Les commandes de rappel AJAX dans Drupal 8 sont utilisées pour spécifier les actions à effectuer du côté client lorsqu'une demande Ajax est traitée. Ces commandes sont des classes PHP qui implémentent le CommandInterface. Drupal 8 comprend plusieurs commandes AJAX intégrées, telles que «alerte», «insérer», «supprimer» et «remplacer», entre autres. Vous pouvez également créer des commandes AJAX personnalisées en créant une nouvelle classe qui implémente le CommandInterface.

Comment puis-je créer une commande ajax personnalisée dans Drupal 8?

Pour créer une commande AJAX personnalisée dans Drupal 8 , vous devez créer une nouvelle classe qui implémente le CommandInterface. Cette classe doit définir une méthode de rendu qui renvoie un tableau avec les touches suivantes: «Commande», qui est le nom de la commande, et «méthode», qui est la méthode à appeler du côté client. Le tableau peut également inclure des données supplémentaires qui seront transmises à la méthode côté client.

Comment puis-je gérer les erreurs AJAX dans Drupal 8?

Gestion des erreurs AJAX dans Drupal 8 peut être effectuée par Utilisation de la touche «Erreur» dans la propriété «#AJAX» de l'élément de formulaire. Cette clé spécifie une méthode de rappel qui sera appelée si une erreur se produit pendant la demande AJAX. La méthode de rappel doit renvoyer un objet de réponse AJAX qui définit comment gérer l'erreur.

Comment puis-je utiliser AJAX pour mettre à jour plusieurs éléments sur une page dans Drupal 8?

pour utiliser AJAX pour mettre à jour Plusieurs éléments sur une page dans Drupal 8, vous pouvez retourner plusieurs commandes dans l'objet Ajax Response. Chaque commande doit spécifier l'élément à mettre à jour et l'action à effectuer. Les commandes seront exécutées dans l'ordre où ils sont ajoutés à l'objet de réponse.

Comment puis-je utiliser Ajax pour remplacer un élément sur une page dans Drupal 8?

pour utiliser Ajax pour remplacer un Élément sur une page de Drupal 8, vous pouvez utiliser la commande 'Remplacer'. Cette commande nécessite deux arguments: le sélecteur de l'élément à remplacer et le nouveau contenu. Le sélecteur peut être n'importe quel sélecteur jQuery valide.

Comment puis-je utiliser Ajax pour supprimer un élément d'une page dans Drupal 8?

pour utiliser Ajax pour supprimer un élément d'une page dans Drupal 8 , vous pouvez utiliser la commande «supprimer». Cette commande nécessite un argument: le sélecteur de l'élément à supprimer. Le sélecteur peut être n'importe quel sélecteur jQuery valide.

Comment puis-je utiliser Ajax pour insérer du contenu dans une page dans Drupal 8?

pour utiliser Ajax pour insérer du contenu dans une page dans Drupal 8, vous peut utiliser la commande 'insert'. Cette commande nécessite deux arguments: le sélecteur de l'élément où le contenu sera inséré et le nouveau contenu. Le contenu peut être inséré avant, après ou à l'intérieur de l'élément sélectionné.

Comment puis-je utiliser Ajax pour afficher un message d'alerte dans Drupal 8?

Pour utiliser AJAX pour afficher un message d'alerte dans Drupal 8, vous pouvez utiliser la commande «Alert». Cette commande nécessite un argument: le message est affiché. Le message peut être n'importe quelle chaîne valide.

Comment puis-je utiliser Ajax pour rediriger vers une autre page de Drupal 8?

pour utiliser Ajax pour rediriger vers une autre page dans Drupal 8, vous pouvez Utilisez la commande «Redirection». Cette commande nécessite un argument: l'URL de la page à rediriger vers. L'URL peut être n'importe quelle URL valide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!