¿Cómo activar programáticamente un clic en un botón de envío de formulario habilitado para AJAX?

25

Estoy tratando de activar mediante programación (con jQuery) un clic en un botón con comportamiento AJAX en forma de Drupal, pero hasta ahora jQuery('#edit-submit').click()no hace nada.

Un clic real del mouse en ese botón funciona según lo previsto. ¿Alguna idea de cómo hacer que funcione?

7 ajax javascript Daniel
fuente
Si es un botón # edit-submit, ¿no puede simplemente hacer $ ('formulario'). Submit ()?
cam8001
eso tampoco funcionó para mí. Publica el formulario de una manera que no es AJAX o no hace nada, depende de algunas configuraciones en el generador de formularios.
Daniel

Respuestas:

40

jQuery('#edit-submit').mousedown() Aparentemente hay una gran diferencia.

Daniel
fuente
3
no funciona para mí
ram4nd
Esta solución funcionó para mí. Al hacer clic en el botón se ejecutó la llamada ajax pero .click () o las variaciones no funcionaron .mousedown () funciona perfectamente.
Eric Goodwin
Evitaría usar el selector de ID en elementos de formulario. Si el formulario se reconstruye durante la devolución de llamada AJAX, los ID de todos los elementos cambiarán y su selector jQuery ya no funcionará.
Yuriy Babenko
Exactamente lo que dijo Eric. Me gustaría saber por qué hay diferencia ... en serio, esto parece no tener sentido.
Johnathan Elmore
@JohnathanElmore mousedown()es solo "la primera parte" de un click()evento, que se completa cuando mouseup()ocurre. Cuando hace clic en un enlace y luego suelta el mouse fuera del área del enlace, click()generalmente no se dispara y no se sigue el enlace. Probablemente una llamada ajax impide que el mouseup()ser despedido, pero esto es sólo una suposición ...
pamatt
7

En realidad, no hay necesidad de adivinar.

Debes usar los comportamientos de Drupal

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

       // Your code goes here....

    }
}

Esto le dará acceso a la propiedad ajax de la configuración, 

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

       console.log(settings.ajax);

    }
}

Dependiendo de su configuración, debería ver una lista de elementos desencadenantes, con varias propiedades, como el nombre de la función de devolución de llamada, la identificación del selector y el nombre del evento desencadenante.

Luego puede usar la información relevante para activar su evento.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');
PatrickS
fuente
2
Me gusta esta respuesta porque ofrece una técnica interesante para descubrir cómo interactuar con los elementos generados para los desarrolladores frontend no Drupal que podrían estar trabajando en un proyecto de Drupal. +1
Lester Peabody
6

Crear envío ajax como el siguiente.

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

Entonces el evento jquery .click () funcionaría en la forma drupal ajax.

Leopathu
fuente
¿puede publicar la función de devolución de llamada de muestra también, cuando lo intenté, no va a la función de devolución de llamada
Crazyrubixfan
1
Se agregó la función de devolución de llamada :)
Leopathu
3

También puede usar el .trigger()método jQuery.$('#element').trigger('click');

Abeja
fuente
3

En mi caso, las soluciones recomendadas anteriormente no funcionaron para mí, pero la mención de .mousedown () me llevó a la siguiente idea que funcionó para mí (Drupal 7):

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

Hay información de fondo útil sobre "por qué", este es el caso en la Referencia de API de formulario en #ajax_prevent

David Newkerk
fuente
No necesitaba el contenedor click (), pero ese enlace a ajax prevent fue la CLAVE.
Ryan Hartman
2

Mirando el módulo de Mejores filtros expuestos, envían el formulario AJAX encontrando $ (. Ctools-auto-submit-click ') y activando 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();
?>
usuario27147
fuente
el evento click funcionó para mí, mientras que el evento mousedown no.
Aross
0

Tienes que activar el submitevento en el formulario. Clicky los mousedowneventos en los botones no funcionan.

Catalin Motatu
fuente
Eso es lo que intenté al principio, y no parece estar funcionando correctamente. Así es como llegué aquí.
Aross