Como acionar programaticamente um clique em um botão de envio de formulário habilitado para AJAX?

25

Eu estou tentando programaticamente (com jQuery) acionar um clique no botão com comportamento AJAX em um formulário Drupal, mas até agora jQuery('#edit-submit').click()não faz nada.

Um clique real do mouse nesse botão funciona conforme o esperado. Alguma idéia de como fazê-lo funcionar?

7 ajax javascript

— Daniel
fonte

Se for um botão # edit-submit, você não pode simplesmente fazer $ ('form'). Submit ()?

— cam8001

isso também não funcionou para mim. Ele publica o formulário de maneira não AJAX ou não faz nada, depende de algumas configurações no construtor de formulários.

— Daniel

40

jQuery('#edit-submit').mousedown() - aparentemente há uma grande diferença.

— Daniel
fonte

3

não trabalho para mim

— ram4nd

Esta solução funcionou para mim. Clicar no botão executou a chamada ajax, mas .click () ou variações não funcionaram .mousedown () funciona perfeitamente.

— Eric Goodwin

Eu evitaria usar o seletor de ID nos elementos do formulário. Se o formulário for reconstruído durante o retorno de chamada AJAX, os IDs de todos os elementos serão alterados e o seletor de jQuery não funcionará mais.

— precisa

Exatamente o que Eric disse. Eu gostaria de saber por que há diferença ... sério, isso parece não fazer sentido.

— Johnathan Elmore 22/09

@JohnathanElmore mousedown()é apenas "a primeira parte" de um click()evento, que fica completa quando mouseup()ocorre. Quando você clica em um link e solta o mouse fora da área do link, click()ele geralmente não é acionado e o link não é seguido. Provavelmente uma chamada ajax impede a mouseup()ser demitido, mas isso é apenas um palpite ...

— pamatt

7

Na verdade, não há necessidade de adivinhar.

Você deve usar comportamentos Drupal

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

       // Your code goes here....

    }
}

Isso lhe dará acesso à propriedade ajax das configurações,

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

       console.log(settings.ajax);

    }
}

Dependendo da sua configuração, você deverá ver uma lista de elementos acionadores, com várias propriedades, como o nome da função de retorno de chamada, o ID do seletor e o nome do evento acionador.

Você pode usar as informações relevantes para acionar seu evento.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');

— PatrickS
fonte

2

Gosto dessa resposta porque ela oferece uma técnica interessante para descobrir como fazer a interface com elementos gerados para desenvolvedores de front-end que não sejam do Drupal que possam estar trabalhando em um projeto do Drupal. 1

— Lester Peabody

6

Crie o envio do ajax como a seguir.

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

Em seguida, o evento jquery .click () funcionaria no formato drupal ajax.

— Leopathu
fonte

você pode enviar a função de exemplo chamada de retorno também, quando eu tentei, a sua não vai retorno de chamada função

— Crazyrubixfan

11

Adicionada a função de retorno de chamada :)

— Leopathu

3

Você também pode usar o .trigger()método jQuery.$('#element').trigger('click');

— Beebee
fonte

3

No meu caso, as soluções recomendadas acima não funcionaram para mim, mas a menção de .mousedown () levou à seguinte idéia que funcionou para mim (Drupal 7):

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

Há algumas informações úteis sobre "por que" esse é o caso na Referência da API do formulário em #ajax_prevent

— David Newkerk
fonte

Eu não precisava do wrapper click (), mas esse link para o ajax prevent foi a KEY!

— Ryan Hartman

2

Observando o módulo Better Exposed Filters, eles enviam o formulário AJAX localizando $ (.ctools-auto-submit-click ') e acionando um clique.

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

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>

— user27147
fonte

o evento click funcionou para mim, enquanto o evento mousedown não funcionou.

— aross

0

Você precisa acionar o submitevento no formulário. Clicke mousedowneventos nos botões não estão funcionando.

— Catalin Motatu
fonte

Foi isso que tentei no início e não parece estar funcionando corretamente. Foi assim que cheguei aqui.

— Aross #