Wie kann ich programmgesteuert einen Klick auf eine AJAX-fähige Schaltfläche zum Senden eines Formulars auslösen?

25

Ich versuche programmgesteuert (mit jQuery) einen Klick auf eine Schaltfläche mit AJAX-Verhalten in einer Drupal-Form auszulösen, aber bis jetzt jQuery('#edit-submit').click()wird nichts unternommen.

Ein echter Mausklick auf diese Schaltfläche funktioniert wie vorgesehen. Irgendwelche Ideen, wie es funktioniert?

7 ajax javascript Daniel
quelle
Wenn es sich um eine Schaltfläche # Bearbeiten-Senden handelt, können Sie dann nicht einfach $ ('Formular'). Submit () ausführen?
cam8001
das hat auch bei mir nicht geklappt. Abhängig von einigen Einstellungen im Form Builder wird das Formular entweder nicht auf AJAX-Basis gesendet oder es werden keine Aktionen ausgeführt.
Daniel

Antworten:

40

jQuery('#edit-submit').mousedown() - Anscheinend gibt es einen großen Unterschied.

Daniel
quelle
3
funktioniert nicht für mich
ram4nd
Diese Lösung hat bei mir funktioniert. Wenn Sie auf die Schaltfläche klicken, wird der Ajax-Aufruf ausgeführt, aber .click () oder Variationen funktionieren nicht, jedoch .mousedown ().
Eric Goodwin
Ich würde es vermeiden, den ID-Selektor für Formularelemente zu verwenden. Wenn das Formular während des AJAX-Rückrufs neu erstellt wird, ändern sich die IDs aller Elemente und Ihr jQuery-Selektor funktioniert nicht mehr.
Yuriy Babenko
Genau das, was Eric gesagt hat. Ich würde gerne wissen, warum es einen Unterschied gibt ... im Ernst, das scheint keinen Sinn zu ergeben.
Johnathan Elmore
@JohnathanElmore mousedown()ist nur "der erste Teil" eines click()Ereignisses, der abgeschlossen ist, wenn er mouseup()eintritt. Wenn Sie auf einen Link klicken und dann die Maustaste außerhalb des Bereichs des Links loslassen, wird der click()normalerweise nicht ausgelöst und der Link wird nicht verfolgt. Wahrscheinlich verhindert ein Ajax-Anruf das mouseup()Abfeuern, aber dies ist nur eine Vermutung ...
Pamatt
7

Eigentlich muss man nicht raten.

Sie sollten Drupal-Verhalten verwenden

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

       // Your code goes here....

    }
}

Dadurch erhalten Sie Zugriff auf die Ajax-Eigenschaft der Einstellungen. 

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

       console.log(settings.ajax);

    }
}

Abhängig von Ihrer Konfiguration sollte eine Liste der auslösenden Elemente mit verschiedenen Eigenschaften angezeigt werden, z. B. dem Namen der Rückruffunktion, der Selektor-ID sowie dem Namen des auslösenden Ereignisses.

Sie können dann die relevanten Informationen verwenden, um Ihr Ereignis auszulösen.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');
PatrickS
quelle
2
Diese Antwort gefällt mir, weil sie eine interessante Technik bietet, um herauszufinden, wie generierte Elemente für Nicht-Drupal-Frontend-Entwickler verwendet werden können, die möglicherweise an einem Drupal-Projekt arbeiten. +1
Lester Peabody
6

Erstellen Sie Ajax Submit wie folgt.

 $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.
}

Dann würde das jquery .click () -Ereignis in der Drupal-Ajax-Form funktionieren.

Leopathu
quelle
Kannst
1
Die Rückruffunktion wurde hinzugefügt :)
Leopathu
3

Sie können auch die .trigger()jQuery-Methode verwenden.$('#element').trigger('click');

Beebee
quelle
3

In meinem Fall haben die oben empfohlenen Lösungen bei mir nicht funktioniert, aber die Erwähnung von .mousedown () hat zu der folgenden Idee geführt, die bei mir funktioniert hat (Drupal 7):

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

In der Form API-Referenz unter #ajax_prevent finden Sie einige hilfreiche Hintergrundinformationen dazu, warum dies der Fall ist

David Newkerk
quelle
Ich brauchte den click () - Wrapper nicht, aber dieser Link zu Ajax Prevent war der Schlüssel!
Ryan Hartman
2

Mit Blick auf das Modul Better Exposed Filters übermitteln sie das AJAX-Formular, indem sie $ (.ctools-auto-submit-click ') suchen und einen Klick auslösen.

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

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>
user27147
quelle
Das Klickereignis hat bei mir funktioniert, das Maus-Down-Ereignis nicht.
Uhr
0

Sie müssen das submitEreignis auf dem Formular auslösen . Clickund mousedownEreignisse auf Schaltflächen funktionieren nicht.

Catalin Motatu
quelle
Das habe ich zuerst versucht und es scheint nicht richtig zu funktionieren. So bin ich hierher gekommen.
17.