AJAX対応フォーム送信ボタンのクリックをプログラムでトリガーする方法


25

プログラムで(jQueryを使用して)DrupalフォームのAJAX動作でボタンのクリックをトリガーしようとしていますが、今のところjQuery('#edit-submit').click()何もしません。

上の実際のマウスクリック意図したようにそのボタンが動作します。それを機能させる方法はありますか?


#edit-submitボタンの場合は、$( 'form')。submit()だけを行うことはできませんか?
cam8001

それも私にはうまくいきませんでした。フォームビルダーの一部の設定に応じて、AJAX以外の方法でフォームをポストするか、何も行いません。
ダニエル

回答:


40

jQuery('#edit-submit').mousedown() -明らかに大きな違いがあります。


3
私にとって仕事はしません
ram4nd

このソリューションは私のために働いた。ボタンをクリックするとajax呼び出しが実行されますが、.click()またはバリエーションは完全に機能しませんでした。
エリックグッドウィン

フォーム要素でIDセレクターを使用しないようにします。AJAXコールバック中にフォームが再構築されると、すべての要素のIDが変更され、jQueryセレクターが機能しなくなります。
ユーリーバベンコ

まさにエリックが言ったこと。なぜ違いがあるのか​​知りたいのですが...真剣に、これは意味をなさないようです。
ジョナサンエルモア

@JohnathanElmore mousedown()は、click()イベントの「最初の部分」であり、mouseup()発生すると完了します。リンクをクリックしてから、リンクの領域外でマウスを放しても、click()通常はリンクが起動せず、リンクはたどられません。おそらくAJAX呼び出しを防ぐmouseup()解雇されるが、これは単なる推測です...
pamatt

7

実際、推測する必要はありません。

Drupalの動作を使用する必要があります

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

       // Your code goes here....

    }
}

これにより、設定のajaxプロパティにアクセスできます。

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

       console.log(settings.ajax);

    }
}

構成に応じて、コールバック関数の名前、セレクターのID、トリガーイベントの名前などのさまざまなプロパティを持つトリガー要素のリストが表示されます。

その後、関連情報を使用してイベントをトリガーできます。

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

2
Drupalプロジェクトに取り組んでいる可能性のある、Drupal以外のフロントエンド開発者向けに、生成された要素とインターフェースする方法を発見する興味深い手法を提供するため、この回答が気に入っています。+1
レスターピーボディ

6

次のようなajax送信を作成します。

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

その後、jquery .click()イベントはdrupal ajaxフォームで機能します。


サンプルのコールバック関数も投稿できますか、私が試したとき、コールバック関数に行きません
-Crazyrubixfan

1
コールバック関数を追加しました:)
Leopathu


3

私の場合、上記の推奨される解決策はうまくいきませんでしたが、.mousedown()に言及することで、私にとってはうまくいく次のアイデアが生まれました(Drupal 7):

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

「理由」に関する役立つ背景情報は、#ajax_preventの Form APIリファレンスにあります。


click()ラッパーは必要ありませんでしたが、ajax防止へのリンクがKEYでした!
ライアンハートマン

2

Better Exposed Filtersモジュールを見ると、彼らは$(。ctools-auto-submit-click ')を見つけてクリックをトリガーすることでAJAXフォームを送信します。

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

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

クリックイベントは機能しましたが、マウスダウンイベントは機能しませんでした。
アロス

0

submitフォームでイベントをトリガーする必要があります。Clickそして、mousedownボタンのイベントが動作していません。


それが最初に試したことであり、正しく動作していないようです。これが私がここに来た方法です。
アロス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.