Questions tagged [javascript]
Use for questions about JavaScript code that is very specific to Drupal.
3,202
questions
-2
votes
0
answers
20
views
Show progress bar when data is being exported
While trying to get the file export progress $_SESSION['prgy'] is always returned as 100 as the ajax request response in the getProgress() function. Expected result is an increment value while the ...
- 97
1
vote
0
answers
24
views
Widget Field Changed VIA Javascript is empty in AJAX callback
So I am using the Geolocation module, specifically with the google maps API. I have a geolocation field. This field is unlimited to allow for adding multiple points to a map. This all works fine.
I ...
0
votes
0
answers
54
views
What do I need to change in my code that uses ColorBox?
I get the following errors and I am unable to understand why.
drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
...
- 495
0
votes
1
answer
40
views
Respond to "dialog:afterclose" once
I'm trying to figure out how to respond to dialog:afterclose only once, and I'm not having any luck getting the syntax right (and I'm having trouble finding resources because most search results refer ...
- 1
1
vote
3
answers
574
views
Why does this JavaScript once implementation not work? [closed]
attach: function(context, settings) {
console.log('enter');
var element = once('addedtocart', '#addtocart', context);
element.on('click', function () {
var ...
- 62
0
votes
1
answer
49
views
A Drupal.behaviors stops working when I update the module
I have checked the field_ui core module to understand how to update my code, but it doesn't seems to work.
This is the code.
(function ($, Drupal, drupalSettings) {
Drupal.behaviors....
- 966
-1
votes
1
answer
88
views
jQuery selector does not find the view content after document.ready event
I am applying some jQuery to make a slick carousel from a Drupal view.
The carrousel does not work erratically on page load; sometimes, it does, sometime it doesn't.
jQuery(($) => {
$(document)....
- 3,369
0
votes
0
answers
57
views
Form States not working when compressed javascript is enabled
I have visible states setup for a 2 fields that correctly work when javascript aggregation is disabled. When I turn JS aggregation on both fields are visible no matter what option I select on the ...
- 438
0
votes
0
answers
138
views
How can I disable a specific javascript function in my base theme?
There is a single javascript function in my base theme that I want to disable and I haven't been able to figure out how to do that.
I have read the documentation on how to disable a whole file with ...
- 325
0
votes
1
answer
74
views
How can I add an external/third party library with type = 'module' using drupal_add_js()?
drupal_add_js('path_to_external_JS_file_on_CDN', [
'every_page' => TRUE,
'type' => 'external',
'defer' => 'defer',
'attributes' => [
'async' => true,
'type' =...
0
votes
1
answer
132
views
How can I add drupalSettings values with the #attached array?
In D7, we have used drupal_add_js with DrupalSettings for accessing php variables to javascript files, for that we have used in D7 in my custom function like below
function custom_function($data)
{
...
0
votes
0
answers
37
views
Why is my javascript settings variable empty in Chrome/Edge, but it works in Firefox?
My javascript file starts like this...
var my_global_var;
(function ($, Drupal, drupalSettings) {
'use strict';
Drupal.behaviors.myBehavior= {
'attach': function attach(context, settings) {
...
- 1,079
0
votes
0
answers
100
views
Select media popup is not opening after upgrade ckeditor from 4 to 5 Drupal
We have drupal version 9.5.7 in our website, When we had upgrade ckeditor4 to ckeditor5 then Select media popup(for image and video) is not opening.
Console error: ajax.js?v=9.5.7:411 An error ...
- 101
0
votes
0
answers
127
views
How can I fire a Google analytics tag event on every form post?
I want to see statistics for forms submissions, grouped by type of forms. I am using Google Analytics 4 (https://www.drupal.org/docs/contributed-modules/google-analytics/using-google-analytics-4x). I ...
0
votes
0
answers
36
views
Use javascript code in a specific div of the webform page
I have a website that was set up using Webforms with page breaks. So on the same URL, there are multiple "pages" and div blocks on each page, with a progress bar on top so you know what &...
- 1
1
vote
0
answers
114
views
How do I alias jQuery to $ before loading a remote library?
I am trying to use Bootstrap autocomplete in my module. I added this to my .libraries.yml.
bootstrap-autocomplete:
remote: https://bootstrap-autocomplete.readthedocs.io/en/latest/
version: 2.3.7
...
0
votes
1
answer
152
views
Use AJAX On Node Add Form To Change Field Required Status
On a node/add form I have a pair of fields that need to be able to control one another. The first field allows a user to enter a birthdate, the second field allows the user to say the birthdate is ...
1
vote
0
answers
73
views
How to subscribe to a view render event?
I'm writing a module that will inject javascript into the page when a view is rendered. The contents of the javascript will depend on the results returned in the view, so ideally I would have access ...
0
votes
0
answers
77
views
Views UI javascript is broken
I discovered today that the Views UI is broken on one my sites. I'm not sure when it broke, because the Views UI is not one of the things I check after updates.
I'm currently at 9.5.3.
My Views UI ...
0
votes
0
answers
93
views
Close menu (details element) after klicking anchor menu link
I have made a "Table of contents menu" on my Drupal 9 website. Here a link to a page with the menu. I use the "Paragraphs module" to add headers to my content and use views to ...
- 69
0
votes
1
answer
265
views
Dynamicaly add ajax form item and add event on checkbox
I've added an ajax callback to my form to add some data on it :
$form['add'] = [
'#type' => 'button',
'#value' => t('add'),
'#ajax' => [
'callback' => [$this, '...
- 103
0
votes
1
answer
214
views
Add js library to custom ckeditor4 plugin
How can an external JS library be integrated into Drupal for use within a custom Ckeditor4 plugin?
My custom plugin needs to set a javascript cookie each time I click on the plugin icon and unset when ...
- 1,710
1
vote
1
answer
82
views
How to translate a link defined in javascript with Drupal.t()
I have a template string that contains a link, which I want to translate afterwards throught the Drupal UI:
var html = `<p>${Drupal.t('<a href="/node/16">Check this out</a>'...
- 43
0
votes
1
answer
53
views
How do I lock down a child theme to use jQuery 3.6.0?
My older site uses bootstrap 3 and has been working great when accessed from a mobile phone and the hamburger menu kicks in, but something has happened in jQuery 3.6.2 (In Drupal 9.5.0) that causes ...
- 1
0
votes
0
answers
76
views
Ajax call brings all the Javascripts of drupal ruining the original page javascript
Based on this solution https://www.drupal.org/docs/7/api/javascript-api/simple-drupal-ajax-load-with-jquery-and-delivery-callback
I'm brining with an ajax call, a multistep form. The ajax brought ...
- 41
1
vote
1
answer
86
views
Can we export json schemas for type script usage?
We have a Drupal installation that acts as a backend and a front end that uses the HttpClientModule from Angular to query this data.
Thanks to the typescript base, we can provide the functions of this ...
- 27
0
votes
1
answer
211
views
Why don't I see Asset Injector code directly in the HTML?
I’m having trouble getting the Asset_Injector module to work, and would like to find out why it's not working.
As a simple test, I want to insert some CSS using the module’s CSS injector:
#container ...
0
votes
3
answers
2k
views
Google API callback doesn't work
I've created this javascript (delivery.js) that is supposed to take a pre-existing div on a webform page and append a Google Map to it, along with a few circles of differing radius.
Here is my ...
- 21
0
votes
2
answers
159
views
Webform javascript CSS selectors with table
I'm currently trying to add javascript via the settings tab for a webform that is supposed to dynamically update the displayed totals at the bottom of the webform page for the user.
A part of this ...
- 21
-2
votes
1
answer
286
views
How to load a dependency in the <head> in drupal 9?
I have followed the official documentation, but it doesn't work
global-styling:
version: VERSION
js:
js/bootstrap.min.js: {}
js/custom.js: {}
css:
component:
css/style.css:...
- 99
0
votes
1
answer
82
views
I can't load inline jQuery
I have a Drupal 9 page, where I am trying to load some inline jQuery code, from CKEditor, but it isn't working and I am not getting any error on the console.
This worked perfectly in Drupal 8.
<...
- 31
0
votes
0
answers
87
views
Why does adding data- attributes to JavaScript libraries prevent them from being aggregated?
I'm having an issue with adding a data attribute to my preprocessed / aggregated javascript within my theme.
When I have preprocessing disabled, I am able to add a data attribute to individual files ...
- 1
1
vote
1
answer
103
views
drupalTranslations is not defined [closed]
I'm an Angular front-end developer. I work with a team that uses Drupal for content.
The scenario is that we use Drupal.t() to translate the strings.
When I translate the word from the back-office, it ...
- 111
0
votes
0
answers
80
views
Submit webform via custom button
I want to update a webform submission via custom button.
On the same page as my webform I created a custom button in a block.
<button id="myButton" onClick="submitWebform()" ...
0
votes
0
answers
167
views
How can I add inline JavaScript on a page returned from a custom controller (not with a library)?
How can I add another render element that contains my custom JavaScript code?
Do I use ['#attached']['html_head'] or code similar to the following one?
$build['body']['script'] = [
'#type' => '...
- 1
3
votes
1
answer
331
views
Is there a way to define a JS library that will use a CDN as a fallback
Is there a way to define a JS library that will use the CDN as a fallback?
Example: Define a billboard.js library that will use the local version of files from libraries directory and fall back to one ...
- 165
-1
votes
1
answer
695
views
How do I implement an AJAX callback?
Given is a Drupal 9 project.
How can I make use of Drupal functionality through an AJAX call?
web/modules/custom/mymodule/src/Appointment.php
namespace Drupal\mymodule;
class Appointment {
public ...
-1
votes
1
answer
257
views
'setAttribute' causing UncaughtDOMException with jQuery Dialog?
I'm using jQuery and the jQuery UI Dialog module (here) to check for new nodes of type "call" every few seconds. Forgive me if I don't know too much about it as I just started using it. Here'...
- 21
0
votes
1
answer
134
views
Not receiving dropdown of custom autocomplete textfield
I am currently trying to create a postcode lookup which returns a street name in an autocomplete dropdown.
To do this I have created a new module containing the following files:
src/Controller/...
- 1
1
vote
0
answers
264
views
JSON-API upload image file
I have been struggling to set up headless Drupal with React js. I did manage to upload the image via JSON API, as per instruction here
But I am not able to display the image. It would be great if ...
- 11
0
votes
0
answers
178
views
Custom block JavaScript not loading for anonymous users
I've created a custom block (via Drupal admin) that uses Twitter's API to insert tweets into a page. The necessary JavaScript loads for authenticated users but not anonymous users.
I configured the JS ...
- 103
0
votes
1
answer
156
views
Toggle (show or hide) visibility of content type field in view depending on relationship with other content type
I have a member content type that displays info about a company's member. One of the fields is named member publications, and it's a link to a blog view where the publications of the member (another ...
- 3
0
votes
0
answers
92
views
Manipulate the DOM with jQuery just before the page loads
Because of accesibility tests i need to manipulate the html of my page just before it loads completely. I dont want to manipulate contrib modules i am using, so i need to do it with jQuery.
In fact, i ...
- 275
1
vote
2
answers
69
views
Make views output more dynamic with knockout.js or other similar framework?
I am currently experimenting with knockout.js so i can make views output more dynamic.
I know React and angular among other newer frameworks are recommended but i do not want to create single page ...
- 19
1
vote
1
answer
2k
views
Is there a way to use jQuery?
I heard Drupal 10 will no longer support jQuery out-of-the-box.
Is there a way to use jQuery in Drupal 10?
My guess would be that adding jQuery to a module's composer.json file would allow jQuery code ...
- 697
1
vote
1
answer
2k
views
Drupal.Behavior fires multiple times while logged in
Some of my Drupal behaviors are firing multiple times while as a logged-in user:
(function myFunction (Drupal) {
"use strict";
Drupal.behaviors.myBehavior = {
attach: function attach ...
- 2,057
0
votes
1
answer
460
views
Behaviors are only executed on some pages, while on others jQuery is not defined
In Drupal 9, I put the following JavaScript code for an image slider and a mobile navigation into a script.js file.
(function($, Drupal, drupalSettings) {
Drupal.behaviors.swiper = {
attach: ...
- 433
1
vote
0
answers
43
views
How assign new simple_oauth scopes?
I've a problem with simple_oauth module and scopes, on a D 9.3.x site.
I'm using it to authenticate user in a decoupled front-end in Next.js.
The case is:
A (new) user log-in without roles expect ...
- 907
0
votes
1
answer
157
views
Add an event listener to select list
I've attached the following js to an exposed views form field and it works on first page load but when the form is changed (by ajax) it doesn't fire.
I can't quite work out where to add an event ...
- 534
0
votes
1
answer
364
views
check if a page has been redirected and then add a class to a certain div
Im using the redirect module to redirect /page/scheduling to /page.
I need to check if the user arrived to a certain page by this redirect.
by checking this i will then add a class to a certain div.
...
