How can I load custom module JavaScript on content type edit form?

Question

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?

Answer 1

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.