Comment déclencher par programme un clic sur un bouton d'envoi de formulaire compatible AJAX?

25

J'essaie de déclencher par programme (avec jQuery) un clic sur le bouton avec un comportement AJAX sous une forme Drupal, mais jusqu'à présent jQuery('#edit-submit').click()ne fait rien.

Un vrai clic de souris sur ce bouton fonctionne comme prévu. Des idées sur la façon de le faire fonctionner?

7 ajax javascript Daniel
la source
S'il s'agit d'un bouton # edit-submit, ne pouvez-vous pas simplement faire $ ('form'). Submit ()?
cam8001
cela n'a pas fonctionné pour moi non plus. Il publie le formulaire d'une manière non AJAX ou ne fait rien, dépend de certains paramètres dans le générateur de formulaire.
Daniel

Réponses:

40

jQuery('#edit-submit').mousedown() - apparemment, il y a une grande différence.

Daniel
la source
3
ne fonctionne pas pour moi
ram4nd
Cette solution a fonctionné pour moi. Cliquer sur le bouton a exécuté l'appel ajax mais .click () ou les variantes n'ont cependant pas fonctionné .mousedown () fonctionne parfaitement.
Eric Goodwin
J'éviterais d'utiliser le sélecteur d'ID sur les éléments de formulaire. Si le formulaire est reconstruit pendant le rappel AJAX, les ID de tous les éléments changeront et votre sélecteur jQuery ne fonctionnera plus.
Yuriy Babenko
Exactement ce qu'Eric a dit. Je voudrais savoir pourquoi il y a une différence ... sérieusement, cela ne semble pas avoir de sens.
Johnathan Elmore
@JohnathanElmore mousedown()n'est que "la première partie" d'un click()événement, qui est terminée lorsqu'elle mouseup()se produit. Lorsque vous cliquez sur un lien, puis que vous relâchez la souris en dehors de la zone du lien, le click()n'est généralement pas renvoyé et le lien n'est pas suivi. Un appel ajax empêche probablement mouseup()d'être renvoyé, mais ce n'est qu'une supposition ...
pamatt
7

En fait, il n'est pas nécessaire de deviner.

Vous devez utiliser des comportements Drupal

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       // Your code goes here....

    }
}

Cela vous donnera accès à la propriété ajax des paramètres, 

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       console.log(settings.ajax);

    }
}

Selon votre configuration, vous devriez voir une liste d'éléments déclencheurs, avec diverses propriétés telles que le nom de la fonction de rappel, l'ID du sélecteur ainsi que le nom de l'événement déclencheur.

Vous pouvez ensuite utiliser les informations pertinentes pour déclencher votre événement.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');
PatrickS
la source
2
J'aime cette réponse car elle offre une technique intéressante pour découvrir comment s'interfacer avec des éléments générés pour les développeurs frontaux non Drupal qui pourraient travailler sur un projet Drupal. +1
Lester Peabody
6

Créez un envoi ajax comme suit.

 $form['button'] = array(
    '#type' => 'button',
    '#value' => 'Click',
    '#ajax' => array(
      'callback' => '_kf_reading_user_points',
      'wrapper' => 'reading-user-points',
      'method' => 'replace',
      'event' => 'click',
    ),
  );

function _kf_reading_user_points(&$form, &$form_state) {
  // Something within the callback function.
}

Ensuite, l'événement jquery .click () fonctionnerait sous la forme drupal ajax.

Leopathu
la source
pouvez-vous également poster l'exemple de la fonction de rappel, quand j'ai essayé, sa fonction de rappel ne va pas
Crazyrubixfan
1
Ajout de la fonction de rappel :)
Leopathu
3

Vous pouvez également utiliser la .trigger()méthode jQuery.$('#element').trigger('click');

Abeille
la source
3

Dans mon cas, les solutions recommandées ci-dessus n'ont pas fonctionné pour moi, mais la mention de .mousedown () a conduit à l'idée suivante qui a fonctionné pour moi (Drupal 7):

$('#custom-submit-button').click(function() {
  $('#ajax-submit-button').trigger('mousedown');
});

Il y a quelques informations utiles sur "pourquoi" c'est le cas dans la référence API de formulaire sous #ajax_prevent

David Newkerk
la source
Je n'avais pas besoin du wrapper click (), mais ce lien vers ajax prevent était la CLÉ!
Ryan Hartman
2

En regardant le module Filtres mieux exposés, ils soumettent le formulaire AJAX en trouvant $ (. Ctools-auto-submit-click ') et en déclenchant un clic.

<?php
// ... near line 190 of better_exposed_filters.js

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>
user27147
la source
l'événement click a fonctionné pour moi, contrairement à l'événement mousedown.
aross
0

Vous devez déclencher l' submitévénement sur le formulaire. Clicket les mousedownévénements sur les boutons ne fonctionnent pas.

Catalin Motatu
la source
C'est ce que j'ai essayé au début, et cela ne semble pas fonctionner correctement. Voilà comment je suis arrivé ici.
aross