Skip to content

Latest commit

 

History

History
90 lines (54 loc) · 4.61 KB

ajax-introduction.md

File metadata and controls

90 lines (54 loc) · 4.61 KB
Raw

Débuter avec AJAX

Introduction

October intègre un framework qui apporte une suite complète de fonctionnalités AJAX qui vous permet de charger des données depuis le serveur sans rafraîchissement de la page. La même libraire peut être utilisée depuis un theme et n'importe où dans le panneau d'administration.

Le framework AJAX existe en deux versions, vous pouvez autant utiliser L'API JavaScript out l'API des attributs de données. L'API des attributs de données ne nécessite aucune connaissance JavaScript pour utiliser AJAX avec OctoberCMS.

Intégrer le framework

Le framework AJAX est optionnel dans votre theme, pour utiliser la librairie, vous devez l'intégrer en plaçant la syntaxe {% framework %} n'importe où dans votre page ou layout. Cela intègres la librairie JavaScript front-end. La librairie requiert jQuery, vous devez donc l'intégrer avant, par exemple :

<script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>

{% framework %}

La syntaxe `{% framework %}` supportes le paramètre **extras**. Si ce paramètre est mentionné, cela integreras les feuilles de styles et fichiers JavaScript pour les [fonctionnalités supplémentaires](../ajax/extras), comme la validation de formulaire ou l'indicateur de chargement.

{% framework extras %}

Comment fonctionnent les requêtes AJAX

Une page peut émettre une requête AJAX autant depuis L'API des attributs de données qu'en utilisant JavaScript. Chaque requête invoque un écouteur d'événement -- aussi appelé un gestionnaire AJAX -- depuis le serveur et peut mettre à jour des éléments de la page en utilisant des partiels. Les requêtes AJAX fonctionnent à son plein potentiel lorsqu'il est utilisé dans un formulaire puis les données du formulaire sont automatiquement envoyé au serveur. Voici le fonctionnement d'une requête :

  1. Le navigateur client émet une requête AJAX en fournissant le nom du gestionnaire et d'éventuels autres paramètres optionnels.
  2. Le serveur retrouve le gestionnaire AJAX et l'exécute.
  3. le gestionnaire exécuté la logique nécessaire et met à jour l'environnement en insérant des variables de page.
  4. Le serveur généres les partiels requis par le client avec l'option update.
  5. Le serveur retourne la réponse, qui contient la syntaxe des partiels générés.
  6. Le framework du côté du client met à jour les éléments de la page avec les données des partiels reçu du serveur.

Remarque : Selon le contexte de la page, la vue d'un partiel du CMS ou d'un partiel back-end sera générée.

Exemple d'utilisation

Ci-dessous retrouvez un exemple utilisant l'API des attributs de données pour créer un formulaire utilisant AJAX. Le formulaire va émettre une requête AJAX vers le gestionnaire onTest et demander à ce que le conteneur du résultat soit mis à jour avec la syntaxe du partiel monpartiel.

<!-- Formulaire utilisant AJAX -->

<form data-request="onTest" data-request-update="monpartiel: '#monDiv'">

<!-- Insérer deux valeurs -->

<input name="valeur1"> + <input name="valeur2">

<!-- Bouton d'action -->

<button type="submit">Calculer</button>

</form>

<!-- Conteneur du résultat -->

<div id="monDiv"></div>

Remarque : Les données valeur1 et valeur2 sont automatiquement envoyé avec la requête AJAX.

Le partiel monpartiel contiens la syntaxe qui lis le résultat de la variable resultat.

Le résultat est {{ resultat }}

La méthode du gestionnaire onTest accèdes aux données du formulaire à l'aide de la fonction d'aide input et le résultat est passé à la variable de page resultat.

function onTest()

{

    $this->page['resultat'] = input('valeur1') + input('valeur2');

}

L'exemple peut être lu ainsi : "Quand le formulaire est envoyé, émet une requête AJAX vers le gestionnaire onTest. Quand le gestionnaire as terminé, il génère le partiel monpartiel et injectes son contenu dans l'élément #monDiv".