Questions tagged as ['javascript']

When clicking an element I get a form which is generated by a view (using https://www.drupal.org/project/editablefields 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 ...

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

global-styling:
  version: VERSION
  css:
    base:
      styles/dist/styles.css: {}
tocbot:
  js:
    libraries/tocbot/tocbot.js: {}
    js/tocInit.js: {}
  css:
    layout:
      libraries/tocbot/tocbot.css: {}
layout_tweaksLib:
  js:
    js/layout_tweaks.js: {}

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

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) {
        return;
      }

      // React on geofieldMapInit event.
      $(document).on('geofieldMapIn ...

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="//mautic.coachingrealista.com/mautic/form/generate.js?id=3"></script>

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

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

<a data-dialog- ...

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  ...

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 ...

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 ...

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.

file1.js

/**
 * @file
 * UI behaviors
 */

(function ($, Drupal) {

 'use strict';

  $(document).ready(function () {
    function test(){
     console.log ...

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?

organigram_admin_library:
  version: 1.0
  js:
    js/admin/jquery-1.10.2.min.js: {}
    js/admin/admin.js: {}

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 ...

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 ...

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?

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" 
    data-dialog-options="{&quot;width&quot;:800}" 
    data-dialog-type="modal" 
    href="/node/add/mycontenttype?enableAjaxSubmit=true">
    create a new registration form.
</a>

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

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 ...

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.

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

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

name: Hello World
type: module
description: Say Hel ...

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 ...

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 Drupal.org: https://www.drupal.org/docs/drupal-apis/javascript-api/add-javascript-to-your-theme-or-module ...describes the process of adding javascript within the context of two other custom modu ...

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.yml

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

.module

function stats_degrees_theme() {
  return [
    'mychart_templ ...

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?

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 ...

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

jQuery(document).ready(function($){
  $('#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 ...

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 ...

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 ...

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. I tried to keep track of using just an input as a selector, it still does not work. Javascript is exactly connec ...

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.

stats_degrees:
  js:
    https://code.highcharts.com/highcharts.js: { type: external, minified: false }
  dependencies:
    - core/jquery

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

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.

<?php
function mymodule_preprocess_status_messages(&$variables) {
  $variables['#attached']['drupalSettin ...

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  ...

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 ...

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 ...