Drupal 7でAJAXフォームをダウンロードして送信する

画像 最近、AJAX送信フォームを実装する必要がありました。 この場合、フォームはポップアップでロードする必要があります。 些細な作業に思えますが、まだ落とし穴があることがわかりました。

Drupal 7のタスクは解決されました。Fancyboxは、ポップアップを作成するためのライブラリとして使用されます。



まず、必要なライブラリを接続する必要があります。



$ path = drupal_get_path 'module' 'simple_ajax_popup' ;

drupal_add_js $ path '/misc/fancybox/source/jquery.fancybox.pack.js' ;

drupal_add_css $ path '/misc/fancybox/source/jquery.fancybox.css' ;

drupal_add_js $ path '/misc/simple_ajax_popup.js' ;

drupal_add_js 'misc / jquery.form.js' ;


jquery.form.jsファイルは、ページにフォームが表示されるたびにDrupalによって組み込まれます。 このファイルは、AJAXを介してフォームを送信するために必要です。 ページをレンダリングする時点では、このフォームはまだ存在しないため、Drupalはこのファイルを接続せず、手動で接続する必要があります。



次に、メニューフックで、必要なコールバックを追加する必要があります。



/ **

* hook_menu()を実装します。

* /

関数 simple_ajax_popup_menu {

$アイテム = 配列 ;

$アイテム [ 'test' ] = 配列

「タイプ」 => MENU_SUGGESTED_ITEM

'title' => t 'テストページ'

'ページコールバック' => 'simple_ajax_popup_page'

'アクセス引数' => 配列 'アクセスコンテンツ'

;

$アイテム [ 'コールバック' ] = 配列

'type' => MENU_CALLBACK

'ページコールバック' => 'simple_ajax_popup'

'アクセス引数' => 配列 'アクセスコンテンツ'

;



$アイテムを 返し ます

}




最初のコールバックは、フォームをダウンロードするためのリンクがあるページになり、2番目のコールバックはフォームを返します。



フォームを呼び出すには、ページへのリンクを追加します。



関数 simple_ajax_popup_page {

drupal_add_library 'system' 'drupal.ajax' ;

return l

「AJAXフォーム」

「コールバック」

配列

'attributes' => array 'class' => array 'fancybox' 'fancybox.ajax'



;

}




AJAXを操作するためにDrupalライブラリを接続することを忘れないことが重要です。



もう1つの重要なポイントは、javascriptのフォームを処理するための関数をfancybox afterShowイベントに添付することです。



関数 simpleAjaxPopupFormProcess {

Drupal。 attachBehaviors '#simple_ajax_popup_form' ;

jQuery '#simple_ajax_popup_form' ajaxForm ;

}





フォームのレンダリング機能は非常に簡単です。



/ **

*フォームでポップアップを返します。

* /

関数 simple_ajax_popup {

$ form = drupal_render drupal_get_form 'simple_ajax_popup_form' )) ;

$フォームを 印刷し ます。

drupal_exit ;

}




ajax_deliver関数が応答に使用されます。 ajax_command_replace関数を使用すると、要求のAJAX応答にコマンドを追加して、指定されたラッパーでコンテンツを置き換えることができます。



function simple_ajax_popup_form_submit $ form $ form_state {

$ form_state [ 'rebuild' ] = TRUE ;

watchdog 'ajax message' $ _POST [ 'message' ] ;

$コマンド = 配列 ;

$コマンド [ ] = ajax_command_replace

'#simple-ajax-popup-form'

'<div class = "messages status">メッセージはシステムログに追加されました。</ div>'

;

ajax_deliver array '#type' => 'ajax' '#commands' => $ commands ;

drupal_exit ;

}




したがって、次のエラーメッセージを表示できます。











または、送信の成功に関するメッセージ:











この場合、フォームは単純にウォッチドッグにメッセージを追加します。



最後に、フォームをAJAX経由で送信できるように、フォーム送信ボタンに特別なクラスを追加することを忘れないでください。



$ form [ 'form_wrapper' ] [ 'submit' ] = array

'#type' => 'submit'

「#値」 => 「送信」

'#attributes' => array 'class' => array 'use-ajax-submit'

;




完全なサンプルコードはこちらからダウンロードできます。



ポップアップを介したこのようなフォーム送信が使用される実際のプロジェクトは、 コメント乱用モジュールです。



All Articles