3

I'm trying to load jQuery on the admin edit form of a content type.

To accomplish this, I developed a module "exclusivetabs" with the following directory structure:

|-- exclusivetabs
    |-- exclusive_tabs.info.yml
    |-- exclusive_tabs.libraries.yml
    |-- exclusive_tabs.module
    |-- js
        |-- cse_banner_header.js

The contents of the relevant files are as follows:

exclusive_tabs.libraries.yml

exclusive_tabs:
  version: 1.x
  js:
    js/cse_banner_header.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

exclusive_tabs.module

<?php

/**
 * Implements hook_form_alter().
 */
function exclusive_tabs_form_node_form_alter(&$form, &$form_state, $form_id) {
  /* @var Drupal\Core\Entity\FieldableEntityInterface $node */
  $node = $form_state->getFormObject()->getEntity();

  if ($node->getType() == 'unit_landing_page') {
   /* var_dump($node);*/
    $form['#attached']['library'][] = 'exclusive_tabs/cse_banner_header';
  }
}

cse_banner_header.js

(function($, Drupal) {

/* Add span to wysiwyg button classes for alignment
------------------------------------ */
Drupal.behaviors.calloutControl = {
        attach: function (context, settings) {
                console.log("I'm loaded!");
                $('#callout-link-options .single-link').click(function () {
                        $('input[type="checkbox"]').attr('checked', true);
                        console.log("I'm checked!");
                });
                $('#callout-link-options .multi-link').click(function () {
                        $('input[type="checkbox"]').attr('checked', false);
                        console.log("I'm unchecked!");
                });
        }
};

})(jQuery, Drupal);

The module loads on the specific content type edit form as intended; my trouble is that I haven't figured out how to get the jQuery to load from the cse_banner_header.js file. I also checked the running scripts in the browser, and from what I can tell, the js file does not load on the page.

What am I missing? How can I get the js file to load on the page?

0
5

You need to change this line:

$form['#attached']['library'][] = 'exclusive_tabs/cse_banner_header';

to:

$form['#attached']['library'][] = 'exclusive_tabs/exclusive_tabs';

As your library name is exclusive_tabs and not cse_banner_header the correct way is 'your_module/library_name' check Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.