Bagaimana secara terprogram memicu klik pada tombol kirim formulir yang diaktifkan AJAX?

25

Saya mencoba secara terprogram (dengan jQuery) memicu klik pada tombol dengan perilaku AJAX dalam bentuk Drupal, tetapi sejauh jQuery('#edit-submit').click()ini tidak melakukan apa-apa.

Sebuah tikus nyata klik pada tombol yang bekerja sebagaimana dimaksud. Ada ide bagaimana membuatnya bekerja?

7 ajax javascript Daniel
sumber
Jika ini adalah tombol # edit-kirim, tidak bisakah Anda melakukan $ ('form') .mohon ()?
cam8001
itu tidak berhasil untuk saya juga. Entah posting formulir dengan cara non-AJAX atau tidak apa-apa, tergantung pada beberapa pengaturan di pembangun formulir.
Daniel

Jawaban:

40

jQuery('#edit-submit').mousedown() - rupanya ada perbedaan besar.

Daniel
sumber
3
tidak bekerja untuk saya
ram4
Solusi ini berhasil untuk saya. Mengklik pada tombol dieksekusi panggilan ajax tetapi .click () atau variasi tidak .mousedown () bekerja dengan sempurna.
Eric Goodwin
Saya akan menghindari menggunakan pemilih ID pada elemen formulir. Jika formulir dibangun kembali selama panggilan balik AJAX, ID semua elemen akan berubah, dan pemilih jQuery Anda tidak akan berfungsi lagi.
Yuriy Babenko
Persis seperti yang dikatakan Eric. Saya ingin tahu mengapa ada perbedaan ... serius, ini sepertinya tidak masuk akal.
Johnathan Elmore
@JohnathanElmore mousedown()hanyalah "bagian pertama" dari sebuah click()acara, yang selesai ketika mouseup()terjadi. Ketika Anda mengklik tautan dan kemudian Anda melepaskan mouse di luar area tautan, click()biasanya tidak dipecat dan tautan tersebut tidak diikuti. Mungkin panggilan ajax mencegah mouseup()dipecat, tapi ini hanya dugaan ...
Pamatt
7

Sebenarnya, tidak perlu menebak.

Anda harus menggunakan perilaku Drupal

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

       // Your code goes here....

    }
}

Ini akan memberi Anda akses ke properti ajax pengaturan, 

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

       console.log(settings.ajax);

    }
}

Bergantung pada konfigurasi Anda, Anda akan melihat daftar elemen pemicu, dengan berbagai properti seperti nama fungsi panggil balik, id pemilih serta nama peristiwa pemicu.

Anda kemudian dapat menggunakan informasi yang relevan untuk memicu acara Anda.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');
PatrickS
sumber
2
Saya suka jawaban ini karena menawarkan teknik yang menarik untuk menemukan cara berinteraksi dengan elemen yang dihasilkan untuk pengembang frontend non-Drupal yang mungkin bekerja pada proyek Drupal. +1
Lester Peabody
6

Buat ajax kirim seperti berikut ini.

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

Maka acara jquery .click () akan berfungsi dalam bentuk drupal ajax.

Leopathu
sumber
dapatkah Anda mengirim contoh fungsi panggil balik juga, ketika saya mencoba, itu tidak akan
memanggil
1
Menambahkan fungsi panggilan balik :)
Leopathu
3

Anda juga dapat menggunakan .trigger()metode jQuery.$('#element').trigger('click');

Beebee
sumber
3

Dalam kasus saya, solusi yang direkomendasikan di atas tidak bekerja untuk saya, tetapi penyebutan .mousedown () mengarah pada ide berikut yang bekerja untuk saya (Drupal 7):

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

Ada beberapa info latar belakang yang bermanfaat tentang "mengapa" hal ini terjadi dalam Formulir API Referensi di bawah #ajax_prevent

David Newkerk
sumber
Saya tidak perlu pembungkus klik (), tetapi tautan ke ajax mencegah itu KUNCI!
Ryan Hartman
2

Melihat modul Better Exposed Filter, mereka mengirimkan formulir AJAX dengan menemukan $ (. Ctools-auto-submit-click ') dan memicu klik.

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

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>
pengguna27147
sumber
acara klik bekerja untuk saya, sedangkan acara mousedown tidak.
aross
0

Anda harus memicu submitacara di formulir. Clickdan mousedownacara pada tombol tidak berfungsi.

Catalin Motatu
sumber
Itulah yang saya coba pada awalnya, dan tampaknya tidak berfungsi dengan benar. Begitulah cara saya sampai di sini.
aross