0

I have a Drupal 8 form and I'm applying some custom javascript to it. I've added a JS file, and a libraries file for my module containing a reference to it, but the code doesn't run.

in module_name/js/autocomplete.js

(function ($, Drupal, drupalSettings) {

  Drupal.behaviors.modulename_autocomplete = {
    attach: function (context, settings) {

      jQuery(function() {
        // Doesn't work
        console.log('foo');

        // Doesn't work
        alert('bar');

      });
    }
  };
})(jQuery, Drupal, drupalSettings);

and in module_name.libraries.yml

module_name.autocomplete:
  version: 1.0
  js:
    js/autocomplete.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui.autocomplete

As the comments suggest, I see no console messages and no alert, so it's clear the behavior is not being executed.

What do I need to change for this to work?

6
  • Put an alert or console.log at the top of the attach function - does it run? If it does, your question is about general JS development and should move to StackOverflow. If it doesn't, then you can remove all of the jQueryUI related stuff as it won't be relevant to the Drupal problem – Clive Jul 25 '16 at 12:26
  • it does not alert and no log in console when do console.log – KTM Jul 25 '16 at 12:31
  • Ok, assuming there are no related errors in the console, it's going to be down to how you're adding the JS file in that case, because it's not being included in the page source. Is the module enabled? Have you rebuilt caches since adding the library? Are you sure your dependencies don't need to be one level further in? – Clive Jul 25 '16 at 12:42
  • 2
    I've changed your question so it's focused on the real problem (the jQueryUI autocomplete stuff is irrelevant), but there seems to be a part missing - where is the code that actually includes the library on a specific page? If the answer is "there isn't any", then that's your problem – Clive Jul 25 '16 at 12:47
  • is there any indentation problem in module_name.libraries.yml file ? i replaced the js with your code now, – KTM Jul 25 '16 at 12:51
2

You don't attach your to your form:

$form['#attached']['library'][] = 'module_name/library_name';

Just a suggestion:

In your library yml it's unnecessary to append your module name to your library name.

4
  • As this is a content type form , where i can attach the js , its not a custom made form using form builder – KTM Jul 25 '16 at 13:06
  • You can use: "hook_form_alter" to change the behavior of an existing form. – ssibal Jul 25 '16 at 13:09
  • Thanks , now am getting the alert , so now i can figure out the autocomplete functionality i guess – KTM Jul 25 '16 at 13:15
  • @Icecreamsandwich and so people like me don't waste their time answering the question – No Sssweat Jul 25 '16 at 13:26
2

If this is a content type form and you have defined this content type as a child of ContentEntityBase in your module, you should use the form builder that you have specified in your @ContentEntityType annotation.

For example:

 * @ContentEntityType(
 *   id = "anwalt_entity",
 *   label = @Translation("Anwalt"),
 *   handlers = {
 *
 *     "form" = {
 *       "default" = "Drupal\preosanwalt\Form\AnwaltEntityForm",

Now, in your class AnwaltEntityForm extends ContentEntityForm, you can add your library attachment like ssibal said:

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $build = parent::buildForm($form, $form_state);

    $build['#attached']['library'][] = 'module_name.autocomplete';
    $build['#attached']['drupalSettings']['x'] = ...

    return $build;
  }

You don't need hooks if you have OO :-)

2
  • the form builder for a content type is not clear , can you post a full fledged example to replace hook_form_alter ? How to define a class and structure and all . Will that class autoloaded when the content type is loaded ? – KTM Jul 26 '16 at 7:01
  • I'd suggest to use "drupal generate:entity:content" with drupalconsole.com. It generates all the boilerplate stuff for you, and also the form_builder. Posting all the code is bit lengthy :-) – Rainer Feike Jul 26 '16 at 13:30

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.