Questions tagged as ['javascript']

Use it for questions about JavaScript code that is very specific for Drupal.
Score: 0
sndr avatar
Load view form with ajax missing ajax functionality
us flag

When clicking an element I get a form which is generated by a view (using module). The problem is that the ajax functionality of the form is lost (no ajax-processed classes are present). This is the working js code to retrieve the view:

(function($,Drupal) {
  Drupal.behaviors.MODULE = {
    attach:function (context, settings) {   
      $('#test').cl ...
Score: 0
Adding theme JS library in custom module
pt flag

My theme documention.libraries.yml file is defined as follows :

  version: VERSION
      styles/dist/styles.css: {}
    libraries/tocbot/tocbot.js: {}
    js/tocInit.js: {}
      libraries/tocbot/tocbot.css: {}
    js/layout_tweaks.js: {}

My custom module implements a custom template which also requires the theme fu ...

Score: 0
mt.i.1 avatar
Geofield map : add marker on click listener
us flag

I've added a google map which I feed thanks to the Geofield module.

I'd like to add an onClick event to each marker to have a custom behavior.

this is what I've done this far :

  Drupal.behaviors.geofieldGoogleMapInteraction = {
    attach: function (context, settings) {
      if (context !== document) {

      // React on geofieldMapInit event.
      $(document).on('geofieldMapIn ...
Score: 0
rpayanm avatar
Drupal modal does not render remote forms (Mautic)
ru flag

I'm trying to embed Mautic forms in my drupal site. I created a controller pointing to '/mautic-form` and in the twig template I have this:

<script type="text/javascript" src="//"></script>

enter image description here

When I go to that page (/mautic-form), the form renders well: enter image description here

But when I use it inside a modal, it does not render that form:

<a data-dialog- ...
Score: 0
Is there a way to synchronize a webpage from another website into Drupal?
es flag

A restaurant has its menu database in Foodpanda.

The owner wants that menu to appear in the website.

  • We can manually duplicate all menu courses from FoodPanda to Drupal, upload the same images, etc. each menu course as a standalone node of a menu content type and then add some module for purchasing courses from the website (as delivery).
  • We might also be able to move the database from FoodPanda to a  ...
Score: 0
Save textarea word count programmatically
cn flag

I'm trying to keep a word count tally on a set of long text fields. As far as I can see, there are several options:

  1. Create a view and add php to a custom template that produces the word count. Most solutions I've found seem too refer back to this 2005 issue, which is considerably out of date.

This would be a viable solution, except none of the code options listed work, and I'm not savvy enough with my p ...

Score: 1
Kojo avatar
How do I override /libraries/ckeditor-wordcount-plugin/lang/some.js?
de flag

I'm using ckwordcount module which basically adds nice max length and counter features to text Fields, and relies on WordCount Plugin for CKEditor Editor.

Most of the translations in the plugin lang directory are incomplete, resulting in messy undefined strings displayed where we'd expect a clear message for end users...

Just to make sure this was the plugin translation source I edited the origin ...

Score: -2
Charly avatar
I cannot call a function in another JavaScript file
bi flag

I have two JavaScript files on my custom theme. One file has functions that need to be used on the other file. What I have below doesn't work. This is the error I get.

Uncaught ReferenceError: test is not defined.

jQuery will be used on both files.


 * @file
 * UI behaviors

(function ($, Drupal) {

 'use strict';

  $(document).ready(function () {
    function test(){
     console.log ...
Score: -3
Lenon Tolfo avatar
can I set multiple JavaScript files on a custom module library?
co flag

I created a new module and I need to add multiple JavaScript files to my pageI.

Should I create a new library for each file, or is it possible to add multiple JavaScript files on the same library as in the following library definition?

  version: 1.0
    js/admin/jquery-1.10.2.min.js: {}
    js/admin/admin.js: {}
Score: 0
fin avatar
How do I make JavaScript behavior run on every page load?
th flag

I don't know how to run my Drupal.behaviours.mybehaviour on every page load.

Here's my code example that run only once, when I load the page is no longer run my code, how can I change that from once to run on every page load:

       Drupal.behaviors.searchFilter = {
            attach: function (context) {
               once('searchFilter', 'html', context).forEach( function () {
                   c ...
Score: 0
ProGrammar avatar
Paragraphs removed from graphql schema if not anywhere in content, which causes error for union type
ca flag

I'm making a headless Drupal site with Gatsby using paragraphs. I'm experienced with Drupal but relatively new with gatsby/graphql.

The issue I'm running into is that if our database does not actually have any instances of a paragraph, then it generates the schema without that (i guess it generates a minimal schema based on what exists, not what types are actually possible) and it errors out beca ...

Score: 0
user3108268 avatar
Validation doesn't show an error when the value entered in the field doesn't respect the minimum length
us flag

I am using the Field validation module to validate a text field using the Length rule with a minimum length of 1.


When the field is left empty, no validation error is shown.


Setting the field as required is not the solution for this specific case, as it causes problems with a module I am using.

How can I avoid users don't enter a value for that field?

Score: 2
Chris Happy avatar
Custom Submit Callback only triggering when Form is Valid when in Dialog
cg flag

I'm trying to create a node in a dialog with the following link:

Enter the title of a registration form or <a class="use-ajax" 
    create a new registration form.

The callback _mymodule_close_dialog() runs perfectly when there are no va ...

Score: 0
mogio avatar
Rerun behaviors
cn flag

In order to output the SearchApiAutoCompleteFormBlock (view) within a modal, we lost the bound JavaScript events on the input. In other words, the DOM element (<div>) for the block was recreated by JavaScript after Drupal adds the events.

Now we need to rebind the events for the autocomplete.

This is the behavior of the Search API autocomplete module.

Drupal.behaviors.searchApiAutocomplete ...
Score: 0
Francisco Javier Valero Moreno avatar
Why does my JS file not get loaded?
nl flag

I am a beginner with Drupal. I want to include a JavaScript file using a custom module.

I created the .libraries.yml file, hello_world.libraries.yml.

    js/basic.js: {}
    - core/jquery
    - core/drupal
    - core/drupalSettings

The module .info.yml file ( contains a reference to the library.

name: Hello World
type: module
description: Say Hel ...
Score: 0
Add custom buttons to TinyMCE editor toolbar
cn flag

I'm trying to add a custom button to my TinyMCE editor in Wysiwyg on a Drupal 7 install.

I've managed to adapt TinyMCE settings to work in my custom module, like so:

function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'tinymce')
  if ($context['profile']->format == 'filtered_html') {
    $settings['browser_spellcheck'] = TRUE;
    $set ...
Score: 0
scaffolding avatar
Adding Javascript within a hook_entity_type_presave() hook
es flag

I'm trying to add Javascript into a hook_entity_type_presave() hook, but it's not firing.

Is it possible to add within this hook?

I've attempted to with no success -- my code is below -- and this example on ...describes the process of adding javascript within the context of two other custom modu ...

Score: 0
Dorian Winterfeld avatar
What is the correct way to load a JavaScript library?
ae flag

I am trying to display form data as a line chart. I am running Drupal 9 in Lando. I am using Charts 5.0.x w/ the Highcharts submodule. I installed the Highcharts JS library using composer. This is the relevant code.


    /libraries/highcharts/highcharts.js: {  }
    - core/jquery


function stats_degrees_theme() {
  return [
    'mychart_templ ...
Score: 0
how to add javascript to an article?
cn flag

just installed a stock Drupal 9.2.2 core, trying to create an article with the /node/add/article editor, how do i add javascript to the article? enter image description here

Score: 1
chalo avatar
Correctly configure the JavaScript tools
de flag

I am trying to configure eslint for Drupal in PHPStorm, and it's really confusing.

For example, I have installed the node dependencies that comes in the web/core/package.json file. In PHPStorm, in the Eslint settings, I have configured web/core/node_modules/eslint, but with this module (eslint-config-drupal), I don't know if to configure it with node_modules/eslint which is in the root where I install ...

Score: -2
Jiah avatar
Jquery to move field above the table - changes during page refresh
in flag

I have the below jquery code to move a multiselect field and a button above the table.

  $('#views-form-resources-block-1 .form-item-ka-types').insertBefore($('#views-form-myblock-block-1 table'));
  $('#views-form-resources-block-1 #edit-actions--2').insertAfter($('#views-form-myblock-block-1 .form-item-ka-types'));

In this code I am moving the ka-types field a ...

Score: 0
tonytheferg avatar
How do I add colorbox-load classes and attributes to links that come from an svg image?
cn flag

I have SVG images that are added to nodes via svg_image_field module. They have internal links in them /load-parts-ajax/{nid}. The path leads to a pop-up page view of content with this path /load-parts-ajax/%. I am attempting open the view in a colorbox. I have this in my implementation in Drupal 7, which works fine. We installled the colorbox_node module, and used the colorbox-node class and this was ...

Score: 2
stckvrw avatar
How do I safely mark the listener as passive and keep it working?
gb flag

I'm trying to optimize the website performance according to the Google PageSpeed recommendations. One of the advices is to set touch and wheel event listeners as passive, which is shown for the core/assets/vendor/jquery/jquery.min.js file and its a.addEventListener(n,g) line.

When I add {passive: true} to the line a.addEventListener(n,g,{passive: true}), some elements on the website using jQuery s ...

Score: 0
Павел Герасюта avatar
Form with ajax and javascript problem
br flag

I re-create the question with more accurate data (Original question Form with ajax and javascript problem). I have a button in my form that generates a fieldset via ajax. When I try to track this button being clicked with jQuery, it just doesn't see this button.The button id is shown below.enter image description here I tried to keep track of using just an input as a selector, it still does not work. Javascript is exactly connec ...

Score: 1
Dorian Winterfeld avatar
Why isn't the Highcharts library, defined from a custom module, loaded in every page?
ae flag

I am running Drupal 9.1.7 on lando on a Mac. I am writing a custom module and I want to include the Highcharts library. The .libraries.yml file looks like this.

  js: { type: external, minified: false }
    - core/jquery

From reading the documentation, I believe I should see the Highcharts library at the bottom of every pag ...

Score: 1
hga77 avatar
Somehow subscribe/react to addMessage
cn flag

I'm trying to find an event that I can subscribe to for the method addMessage.

I need to trigger some code everytime a status message is added. On reacting to this event, I need to send a variable from php to JS. I could not find an event to subscribe to so instead I used a preprocess, below.

function mymodule_preprocess_status_messages(&$variables) {
  $variables['#attached']['drupalSettin ...
Score: 0
Shawn avatar
Javascript, saving a event state?
cn flag

So I have a table that has about 10 items listed. When I click on a 'TR', in my javascript code, I have it set where it highlights that particular table row green. This is basically a generated grocery list and as you browse through the store, you basically "check off" your items that you have picked up.

However, me and my wife both use this since I put it on a live site and I was wondering, how  ...

Score: 0
Josh avatar
Underscore JS Not Loading
yt flag

I am writing code that uses Underscore JS in Drupal 9 that should be loaded from /core/assets/vendor/underscore.

I am using Chrome DevTools to see the sources and though jquery, jquery-once, and modernizer are all loading from /core/assets/vendor/ the underscore library is not.

I am almost positive that this was working last week. I have updated my code since then but it is the same use of underscor ...

Score: 0
HazeDesigns avatar
Prevent webform from submitting when clicking button in markup component
in flag

I have a very complex webform in a Drupal 7 website I've inherited. I have added a markup component which builds a button and added some JS that links this button to trigger a modal window to open. In the modal a block is displayed which contains a view listing some user profiles.

When I visit the webform everything functions normally and I can click the button to open the modal, but when revisit ...