Questions tagged [javascript]
Use it for questions about JavaScript code that is very specific for Drupal.
3,198
questions
0
votes
0
answers
12
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 &...
-3
votes
0
answers
21
views
How to conditionally load JS based on User Role on Layout Builder?
I'm looking to load a couple of javascript files or functions in layout builder based upon whether someone is an admin or not.
I'm not sure if this is something I should be doing in Twig or maybe in ...
1
vote
0
answers
47
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
...
-3
votes
0
answers
27
views
Navigation button events not working after requesting the javascripts from footer
In Drupal 9 I have find out that the modernizr and touchevents javascript files are requested from the header instead of footer. This causes a render blocking issue while monitoring my site using ...
0
votes
1
answer
33
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
23
views
Vocabularies are not showing [closed]
In a Drupal 10 installation with PHP 8.2.1 with the module Taxonomy Manager, the vocabularies are not showing up in admin/structure/taxonomy_manager/voc/{categories}
This is probably a JS issue, as ...
1
vote
0
answers
27
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 ...
1
vote
0
answers
36
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
19
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 ...
0
votes
1
answer
75
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, '...
0
votes
1
answer
64
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
vote
1
answer
42
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>'...
0
votes
1
answer
39
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 ...
0
votes
0
answers
33
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 ...
1
vote
1
answer
50
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 ...
0
votes
1
answer
70
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
2
answers
1k
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 ...
0
votes
2
answers
73
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 ...
-2
votes
1
answer
125
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:...
0
votes
1
answer
42
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.
<...
0
votes
0
answers
44
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
vote
1
answer
55
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 ...
0
votes
0
answers
56
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
56
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' => '...
0
votes
0
answers
47
views
Cannot set properties of null (setting 'innerHTML') error for anonymous users when loading iframe
I have a custom module that is displaying a twig template with an iframe inside it:
There is JS file also being loaded and when I load the page while I'm logged in as an admin, the iframe shows up ...
0
votes
0
answers
100
views
Why is the view page reloading when clicking on the exposed filter value after adding such jquery code?
I had a problem, with two view filters (VERF selector) from the Views Entity Reference Filter module, when selecting any value, reload the page while Use AJAX is enabled. It turned out that the reason ...
3
votes
1
answer
223
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 ...
-1
votes
1
answer
225
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 ...
0
votes
0
answers
17
views
Ajax issue in tab when embedding a view
trying to add two views in panel in drupal 7 in one views it is working fine ajax like comment on ajax and all works good , but while switching on different tab ajax is not working fine.
in recently-...
-1
votes
1
answer
70
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'...
0
votes
0
answers
35
views
Can't add an image to a post - jQuery form plugin seems to be missing?
When I edit a post and try to insert an image, I get a popup saying this:
An error occurred while attempting to process /editor/dialog/image/full_html?_wrapper_format=drupal_modal&ajax_form=1&...
0
votes
1
answer
56
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
vote
0
answers
180
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 ...
0
votes
0
answers
111
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 ...
0
votes
1
answer
74
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 ...
0
votes
0
answers
49
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 ...
1
vote
2
answers
46
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 ...
1
vote
1
answer
266
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 ...
1
vote
1
answer
695
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 ...
0
votes
1
answer
172
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: ...
1
vote
0
answers
18
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 ...
0
votes
1
answer
47
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 ...
0
votes
1
answer
151
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.
...
0
votes
1
answer
2k
views
How upload a file\image via json api?
I'm trying to upload a file or image on a D9 site via json api. The test is namely to upload the user picture on the user entity.
I've been following the documentation or read questions about, but I ...
0
votes
1
answer
444
views
How to refresh and reload (with ajax?) order checkout panes and order calculation independent from commerce cart refresh (e.g. billing address change)
I have following problem:
During checkout, my customer has to fill in his billing address (at least at the first time) to calculate VAT rate and gross price. Further calculation is done via an order ...
0
votes
1
answer
109
views
Overriding Drupal.ajax.prototype is not working
I am trying to override Drupal.ajax.prototype.beforeSend like this:
(function($) {
// In mymodule.js, which appears after ajax.js in the page build
Drupal.ajax.prototype.beforeSend = function(...
0
votes
0
answers
56
views
drupalSettings values lost when accessed from a named function
I have a custom module and in it's .module file I add a value to Drupal settings:
$variables['#attached']['drupalSettings']['my module']['color_body'] = '#dd0000';
I have a named js function and ...
0
votes
0
answers
150
views
Why am I seeing Modernizr JavaScript errors on page load?
When I load pages on our live site (D9), we see these Modernizr errors from contextual links JS, and the contextual links don't appear on the site.
However, Modernizr does appear to be loaded ahead ...
0
votes
0
answers
59
views
How do I get JS event attached to multiple views rows
I am creating a custom views field and need it to have JS attached to it's on click functionality. When I get one views result, it works perfectly, but when I have multiple results, it only attaches ...
0
votes
2
answers
246
views
How can I make this JavaScript code get executed when the BigPipe module is enabled?
I keep struggling with getting JavaScript executed when I need to target a DOM element that is added via the BigPipe module when I'm logged in on my Drupal site.
The following code runs when I'm not ...