Richtiger Weg, um JS und CSS zu Node / Edit und anderen Formularen hinzuzufügen

10

Ich erstelle eine Site mit viel JS und frage mich, wo ich den JS-Code ablegen soll. Optimalerweise möchte ich die JS bei jedem Modul und nicht bei der Themenebene behalten. Einige Inhalte können als Blöcke usw. angezeigt werden.

Aber ich habe einige Probleme mit dem Cache. In meinem Beispiel muss ich JS & CSS zum Knotenbearbeitungsformular hinzufügen. Ich habe hook_block_view verwendet, aber es wird zwischengespeichert. Wenn also im Knotenbearbeitungsformular ein Fehler auftritt, werden die Funktionen drupal_add_js & drupal_add_css nicht aufgerufen. Gleiches scheint für hook_node_prepare zu gelten.

Wo würden Sie die JS & CSS-Ebene eingeben? und gibt es Hooks, die aufgerufen werden, auch wenn im Knotenbearbeitungsformular ein Fehler vorliegt?

theming hooks

— Jens
quelle

6

Wenn Sie JS und CSS zur Knotenbearbeitungsseite im Besonderen (oder zu einem beliebigen Formular im Allgemeinen) hinzufügen möchten, ist der beste und richtige Ort dafür hook_form_alter (). Die Eigenschaft, die Sie verwenden sollten, ist #after_build.

Dieser Kommentar zu DO sagt Ihnen genau, was zu tun ist - http://drupal.org/node/1253520#comment-4881588

Hoffe das hilft :-)

— Sumeet Pareek
quelle

Danke, genau das, was ich brauchte. Habe jetzt eine schöne Form, viel besser als die Standardeinstellung, die er hat. Irgendwelche Meinungen zur Architektur einer solchen Site?

— Jens

Ich bin froh, dass es funktioniert hat. Wenn dies der Fall ist, sollten Sie die Antwort als "Antwort akzeptiert" markieren, damit die Frage nicht in der Liste der unbeantworteten Fragen angezeigt wird und die Person, die Ihnen hilft, "Karma" erhält. Ich sehe, dass du neu hier bist. Ich bin es auch, aber ich habe aktivere Konten für andere StackOverflow-Dienste und ich liebe diesen Ort.

— Sumeet Pareek

Und oh ... nur zu wissen, dass Sie JS CSS in einem Formular benötigen und versuchen, die Architektur der Website zu kommentieren, wäre nicht weniger als ein Verbrechen :-p

— Sumeet Pareek

Sicher, antwortete jetzt.

— Jens

1

@SumeetPareek Ich habe Ihre Antwort abgelehnt (aber keine Beleidigung), da die Verwendung #attachedin fast jedem Fall empfohlen wird. Darüber hinaus wird drupal_add_js / css in Drupal 8 veraltet sein.

— AyeshK

6

Sie sollten die Eigenschaft #attached verwenden, um sicherzustellen, dass JS / CSS immer ordnungsgemäß zusammen mit einem anderen Renderelement geladen wird.

— Letharion
quelle

Ich hatte das Gefühl, dass dies wirklich von einem Beispiel für die Verwendung #attachedund möglicherweise einigen zusätzlichen Informationen zu dem Problem, das Sie vermeiden, profitieren würde .

— Michael Greisman

@MichaelGreisman Ich muss sagen, ich sehe den Wert des Hinzufügens des Codes hier nicht sofort. Es wird besser unter dem von mir angegebenen Link gepflegt, der die offizielle Dokumentation dazu darstellt. Meine Antwort erklärt , was zu tun, aber die Form api Dokumentation ist der richtige Ort für wie .

— Letharion

3

Ich hatte das Gefühl, dass diese Antworten und Kommentare dringend Beispielcode benötigten, insbesondere die von @AyeshK und @Letharion. Dies ist zu lang für einen Kommentar. Bitte verzeihen Sie die Antwort. Wenn es für Sie nützlich ist, stimmen Sie entweder die Antwort von Sumeet oder Letharion ab. Das folgende Beispiel fügt natürlich CSS hinzu, wäre jedoch für das Hinzufügen von Javascript nahezu identisch.

Die Verwendung der Antwort von @ Sumeet, aber die Verwendung der #attachedEigenschaft anstelle von drupal_add_css, sieht folgendermaßen aus:

/* 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;
}

Schließlich kann die Abwertung von drupal_add_cssin diesem Beitrag gefunden werden . Das mag für viele neu sein, für die drupal_add_xxx genauso gut funktioniert hat wie für mich.

— Michael Greisman
quelle

Das #after_buildbisschen ist nach meinem besten Wissen Unsinn und sollte einfach entfernt werden. (Es gibt einen ähnlichen Kommentar zu der Antwort, die die #after_buildLösung liefert. ) Ich denke, dies erklärt an sich, warum meine kurze Antwort gut ist. Wenn Sie sich einfach den von mir bereitgestellten Link ansehen, finden Sie denselben Code, jedoch ohne die unnötigen Bits.

— Letharion

0

Für Drupal 8 würde ich Ihnen raten, sich diesen Artikel anzusehen

Bibliotheken.yml

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

.Modul

function MODULE_page_attachments(array &$page) {
  $page['#attached']['library'][] = MODULE/something;
}

— Chris Happy
quelle