JSとCSSをnode / editや他のフォームに追加する正しい方法


10

私はたくさんのJSを含むサイトを作成していて、JSコードをどこに配置すればよいか疑問に思っています。最適には、テーマレイヤーではなく各モジュールでJSを保持したいと思います。一部のコンテンツはブロックなどとして公開される可能性があります。

しかし、キャッシュに関していくつか問題があります。私の例では、JSとCSSをノード編集フォームに追加する必要があります。hook_block_viewを使用しましたが、キャッシュされています。したがって、ノード編集フォームにエラーがある場合、drupal_add_jsおよびdrupal_add_css関数は呼び出されません。同じことがhook_node_prepareにも当てはまるようです。

JS&CSSレイヤーはどこに入力しますか?そして、ノード編集フォームにエラーがある場合でも呼び出されるフックはありますか?

回答:


6

JSとCSSを特定のノード編集ページ(または一般に任意のフォーム)に追加する場合、最適な場所はhook_form_alter()であり、使用するプロパティは#after_buildです。

DOに関するこのコメントは、何をすべきかを正確に示しています-http://drupal.org/node/1253520#comment-4881588

お役に立てれば :-)


ありがとう、必要なものだけ。デフォルトの彼よりもずっと良いフォームを手に入れました。そのようなサイトのアーキテクチャについて何か意見はありますか?
イェンス

うまくいきました。それがそうであるとき、あなたは答えを「答えが受け入れられた」としてマークするべきです。そうすれば、質問は未回答の質問のリストに現れず、あなたを助けてくれる人が「カルマ」を得ます。あなたがここにいるのがわかります。私もそうですが、他のStackOverflowサービスでよりアクティブなアカウントを持っているので、この場所が大好きです。
Sumeet Pareek、2012

そして、ああ..フォームにJS CSSが必要であることを知っていて、サイトのアーキテクチャについてコメントしようとすることは犯罪に他ならないでしょう:-p
Sumeet Pareek

確かに、今答えました。
イェンス

1
@SumeetPareek #attachedほとんどすべてのケースで使用が推奨されているため、私はあなたの回答に反対票を投じました(ただし違反はありません)。また、drupal_add_js / CSSはDrupalの8に廃止される予定
AyeshK

6

あなたは使うべき#attached JS / CSSは常に別のレンダリング要素を適切に一緒にロードされたのを得ることを保証するためにプロパティを。


これは、の使用例と#attached、回避している問題についての追加情報から本当にメリットがあると感じました。
Michael Greisman、2015年

@MichaelGreismanここにインラインでコードを追加することの価値はすぐにはわかりません。それは私が提供したリンクでよりよく維持されるでしょう、それはそれを行う方法に関する公式のドキュメントです。私の答えは説明して何をやってますが、フォームのAPIドキュメントは、のために適切な場所です
Letharion、2015年

3

これらの回答とコメントには、特に@AyeshKと@Letharionのサンプルコードが必要であると感じました。コメントとしては長すぎますので、ご容赦ください。参考になれば、SumeetかLetharionのどちらかの回答に賛成投票してください。また、次の例では明らかにCSSを追加していますが、JavaScriptを追加する場合もほぼ同じです。

@Sumeetの答えを使用し#attachedますがdrupal_add_css、の代わりにプロパティを使用すると、次のようになります。

/* Implements hook_form_FORM_ID_alter() */
function MY_MODULE_form_MY_FORM_ID_alter(&$form, &$form_state, $form_id) {
  $form['#after_build'][] = 'MY_MODULE_some_function_name_after_build';
}

function MY_MODULE_some_function_name_after_build($form, &$form_state) {
  $style_path = drupal_get_path('module','MY_MODULE') . '/css/my_css.css';
  // drupal_add_css('file', $style_path);
  $form['#attached']['css'][] = $style_path;
  return $form;
}

最後に、の廃止はdrupal_add_cssで見つけることができ、このポスト。それは私にとってdrupal_add_xxxがうまく機能していた多くの人にとってはニュースかもしれません。


#after_buildビットは、私の知識のナンセンスの最高に、ある、と単純に削除する必要があります。(#after_build解決策を提供する回答についても同様のコメントがあります)私はこれだけで、なぜ私の短い回答が良いのかを説明していると思います。私が提供したリンクを単純に見ると、同じコードが見つかりますが、不要なビットはありません。
Letharion、2015年

0

Drupal 8については、この記事をご覧になることをお勧めします

libraries.yml

something: 
  version: VERSION
  js: 
    js/something.js: {}
  dependencies: 
    - core/jquery

.module

function MODULE_page_attachments(array &$page) {
  $page['#attached']['library'][] = MODULE/something;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.