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

Respostas:

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 #