web-dev-qa-db-fra.com

Comment déclencher un Ajax existant sans formulaire à partir d'un événement JavaScript

J'essaie de comprendre AJAX in Drupal 8.

J'ai un module personnalisé qui fonctionne, en utilisant AJAX pour changer le contenu d'un div quand un lien est cliqué.

L'API dit:

De nombreux événements différents peuvent déclencher des réponses Ajax, notamment:

Cliquer sur un bouton Appuyer sur une touche Déplacer la souris

Comment puis-je déclencher le même processus que celui de Drupal AJAX le fait lorsqu'une fonction est appelée à partir du déclenchement d'un objet JavaScript à la place?

Objet JavaScript

function calledOnSomeEvent(e) {
  String data = e.target.data;
  // do something to call AJAX with the data
}

Le backend AJAX fonctionne avec cette route:

myModule.routing.yml

myModule.myRoute:
  path: '/nojs/myFunction/{myParameter}'
  defaults:
    _controller: '\Drupal\myModule\MyController::myFunctionCallback'
    _title: 'myFunction'
  requirements:
    _permission: 'access content'

HTML

<a href="nojs/myFunction/testData" class="use-ajax">Click for testData!</a>

Ma compréhension est que Drupal injecte une sorte d'événement lorsque ce lien est cliqué, ou que l'URL est juste modifiée, et le contrôleur n'est activé que lorsque cette URL est modifiée.

Javascript

(function($, Drupal) {

  Drupal.AjaxCommands.prototype.myFunction = function(ajax, response, status){

    $('#targetDiv').html(response.data);
  }

})(jQuery, Drupal);

J'ai omis PHP code pour le contrôleur, qui crée une commande. La commande rend la sortie à Drupal.AjaxCommands.prototype.myFunction, qui met à jour le div.

Un XMLHttpRequest est-il le seul moyen de faire interagir JavaScript avec la route/PHP? Si oui, quel chemin utiliser?

Je pense qu'il pourrait y avoir un moyen pour JavaScript d'interagir avec le gestionnaire AJAX de Drupal pour appeler la même fonction que le fait de cliquer sur le lien modifié avec "use-ajax", car cela est géré d'une manière ou d'une autre .. .

Toute idée serait appréciée.

Merci!

8javascriptroutesajax
7
j.h.

Si vous ne voulez pas ajaxifier le lien avec "use-ajax" et déclencher une requête Ajax par programmation, utilisez:

Drupal.ajax({url: endpoint}).execute();

Cela crée un objet Ajax avec le point de terminaison comme URL et l'exécute.

Vous trouverez plus d'options dans les commentaires de Drupal.ajax Dans ajax.js:

/**
   * Provides Ajax page updating via jQuery $.ajax.
   *
   * This function is designed to improve developer experience by wrapping the
   * initialization of {@link Drupal.Ajax} objects and storing all created
   * objects in the {@link Drupal.ajax.instances} array.
   *
   * @example
   * Drupal.behaviors.myCustomAJAXStuff = {
   *   attach: function (context, settings) {
   *
   *     var ajaxSettings = {
   *       url: 'my/url/path',
   *       // If the old version of Drupal.ajax() needs to be used those
   *       // properties can be added
   *       base: 'myBase',
   *       element: $(context).find('.someElement')
   *     };
   *
   *     var myAjaxObject = Drupal.ajax(ajaxSettings);
   *
   *     // Declare a new Ajax command specifically for this Ajax object.
   *     myAjaxObject.commands.insert = function (ajax, response, status) {
   *       $('#my-wrapper').append(response.data);
   *       alert('New content was appended to #my-wrapper');
   *     };
   *
   *     // This command will remove this Ajax object from the page.
   *     myAjaxObject.commands.destroyObject = function (ajax, response, status) {
   *       Drupal.ajax.instances[this.instanceIndex] = null;
   *     };
   *
   *     // Programmatically trigger the Ajax request.
   *     myAjaxObject.execute();
   *   }
   * };
   *
   * @param {object} settings
   *   The settings object passed to {@link Drupal.Ajax} constructor.
   * @param {string} [settings.base]
   *   Base is passed to {@link Drupal.Ajax} constructor as the 'base'
   *   parameter.
   * @param {HTMLElement} [settings.element]
   *   Element parameter of {@link Drupal.Ajax} constructor, element on which
   *   event listeners will be bound.
   *
   * @return {Drupal.Ajax}
   *   The created Ajax object.
   *
   * @see Drupal.AjaxCommands
   */
  Drupal.ajax = function (settings) {

Votre deuxième question, est-ce qu'un XMLHttpRequest est le seul moyen de faire interagir JavaScript avec la route/PHP? Si oui, quel chemin utiliser?

Vous pouvez utiliser un non drupal jQuery.ajax() normal, alors vous n'avez aucune restriction pour le format, vous pouvez utiliser json (qui Drupal utilise pour son propre ajax) ou tout autre format. Vous pouvez configurer un itinéraire pour un chemin arbitraire et l'utiliser dans $ .ajax ().

12
4k4