11 votes
Accepted

Loading javascript on specific sections/pages

A safe way to add JavaScript resources via the frontend, is to use the {% includeJsFile %} Twig function in your template. The nice thing about the includeJsFile function is that it doesn't matter ...
Mats Mikkel Rummelhoff's user avatar
10 votes
Accepted

Interpret TWIG's {% js %} as <script> in PHPStorm

You can do this using PhpStorm’s Language Injections feature. In fact, as of PhpStorm 2017.3, it has included support for {% script %} tags out of the box. To extend that to {% js %} tags, go to ...
Brandon Kelly's user avatar
8 votes
Accepted

Update Commerce Cart using Ajax

Yes, you can do all the normal commerce actions via ajax. How this is done changed slightly with Craft 4/Commerce 4, so use the appropriate approach below. (Basically, they used to use an attribute ...
Jeremy Daalder's user avatar
6 votes
Accepted

Local storage in Twig

No. Twig gets compiled into PHP and is run entirely on the server.
Marion Newlevant's user avatar
6 votes
Accepted

Load More Entries Button

The Sprig plugin will save you a lot of trouble, and dynamically loading more entries is a perfect use-case for it. If you prefer to use jQuery, then by all means do so, but keep in mind that it is ...
Ben Croker's user avatar
  • 7,411
5 votes
Accepted

Craft 3 - ajax request to plugin

95% of the time you see a 400 Bad Request error, it's because it's a CSRF token validation error (or you're just missing the token all-together). Craft 3 has CSRF validation enabled by default. Here'...
Brad Bell's user avatar
  • 67.5k
4 votes

Triggering JavaScript from back-end event

When an entry is saved, an Entry saved. flash message is set and displayed by Craft. You could use the Control Panel JS plugin to write a script to detect this flash message and perform your desired ...
Steve Rowling's user avatar
4 votes
Accepted

Use Craft.postActionRequest in frontend template

The global Craft object available in the Control Panel is exposed in the craft.js file, which is a bundle containing most of the JavaScript code used in Craft's Control Panel (i.e. admin area). This ...
Mats Mikkel Rummelhoff's user avatar
4 votes
Accepted

Creating environment variable from JSON file

You could write some PHP at the top of your general.php file that reads the JSON manifest in your public root directory, and add its keys/values to the config array. I wouldn't use environment ...
Mats Mikkel Rummelhoff's user avatar
4 votes
Accepted

Setting the position of a Smart Map marker on the front end

Turns out my code was pretty much working but there was another issue in there that was stopping the map marker updating. I've since resolved it. The original form is huge so here's a cut down snippet ...
foamcow's user avatar
  • 2,019
4 votes

Load More Entries Button

Here's a cut-down version of what I'm using on https://cld.agency/showcase The quick example below uses jQuery, but I have a more complete updated version using vanilla JS here: https://github.com/cld-...
James Smith's user avatar
  • 5,189
4 votes

javascript module question

You achieve this by adding a param to the tag: {% js 'path/to/jsfile.js' with { type:'module' } %} // outputs <script type="module" src="path/to/jsfile.js">
Robin Beatty's user avatar
3 votes
Accepted

HTML and Scripts in Entries?

Giving the enduser the ability to include scripts is risky way to present social media links. Any errors could protentialy break the entire html page / site If you really want to do it this way you ...
Moto_Nomad's user avatar
3 votes
Accepted

Ajax Function on a search form not working in Safari & IE

Try attaching the listener on the forms submit event instead, and prevent that instead of just the click on the button. Something like this (make sure you change the selector for your form): {% if ...
André Elvan's user avatar
  • 7,288
3 votes
Accepted

Is there a JS event triggered when a new widget is created?

It appears when a new widget is created it has a variety of classes (such as new and loading-new) that don't exist on established widgets: class="widget new loading-new myplugin_mywidget flipped last"...
Ben Parizek's user avatar
  • 13.4k
3 votes

How to trigger updateElements when hide modal?

If the page is rendered from a template that extends _layouts/elementindex, then the Element Index class instance is available at Craft.elementIndex. So all you’d need to do is include this in the ...
Brandon Kelly's user avatar
3 votes
Accepted

Listen for checkbox check event for assets table and modify action trigger menu item

Here is one approach: Whenever an asset is checked on or off, it triggers a manipulation of the hidden ul.menu. You could listen for that update to be complete, then you’ll be able to access and hide ...
Vanessa Morato's user avatar
3 votes
Accepted

Craft 3 - custom callback after Garnish onDragStop

Garnish’s Base class introduces its own concept of events, that is separate from DOM events. Here’s how you’d set up the listener: // get the Craft.MatrixInput object var matrix = $('.matrix-field')....
Brandon Kelly's user avatar
3 votes

How can I add Google MarkerClusterer library to Smart Map?

UPDATE It looks like the underlying MarkerClusterer library has been moved (and theoretically improved). The new library can be found here... https://github.com/googlemaps/js-markerclustererplus Not ...
Lindsey D's user avatar
  • 24k
3 votes
Accepted

Can a plugin add JS or CSS to the control panel in Craft 3?

You should be able to do this with Asset Bundles. Full documentation on this is here.
Oli's user avatar
  • 7,495
3 votes
Accepted

Ajax post request front-end csrf token

You can take a look at the guide Enabling CSRF Protection <script type="text/javascript"> window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}"; window....
Robin Schambach's user avatar
3 votes

How can I get cookies that were set in javascript from a twig template? [NEW]

Assuming this is for Craft 3, you can do something like this from a template to loop through all available cookies for a site: {% set cookies = craft.app.request.getCookies() %} {% for cookie in ...
Brad Bell's user avatar
  • 67.5k
3 votes
Accepted

Re-initialize / layout Masonry after a sprig change

This is oddly similar to this question. The problem is that your Sprig component includes the wrapper (the div with the masonry class), so reloading the Sprig component not only replaces the items, ...
MoritzLost's user avatar
  • 11.3k
3 votes
Accepted

Escaping quotes of an entry string used inside a script tag

<script> var mystring = '{{ creatif.creatifsName|escape('js') }}' </script> https://twig.symfony.com/doc/2.x/filters/escape.html Remember to wrap your variable declaration in quotes ...
pixleight's user avatar
3 votes
Accepted

How to use page specific javascript using asset rev plugin and webpack?

So what you want to compile a second JS file that's output seperately from the main JS file? In this case, you'll have to adjust the webpack config. The webpack.config.js in the starter project doesn'...
MoritzLost's user avatar
  • 11.3k
2 votes

Add listener to dynamic html elements

In my question above I was chasing a misspelled class name with a limited understanding of how I should be approaching the problem I was asking about. Mats answer points out several considerations on ...
Ben Parizek's user avatar
  • 13.4k
2 votes
Accepted

Add listener to dynamic html elements

You might be looking at a simple race conditions issue, i.e. that the rowAddOrRemove event is triggering before the new .myfieldwrapper elements have been attached to the DOM. To make sure that you ...
Mats Mikkel Rummelhoff's user avatar
2 votes
Accepted

I want to get the HTML/text contents of the Redactor editor

I'm not 100% sure I follow, but I think this is what you are looking for. In your javascript file, you'll want code.set API Reference ... $('#yourTextArea').redactor('code.set', your.data);
Damon's user avatar
  • 4,706
2 votes
Accepted

How to watch for changes on an Element Select Relations field?

I think there's a few ways to skin this cat, but the most robust way would probably be to listen to the the selectElements event for the BaseElementSelectInput instances bound to each field's ...
Mats Mikkel Rummelhoff's user avatar
2 votes

Triggering JavaScript from back-end event

Thanks both for answers - realised that was probably going about things the wrong way so have tried a different approach. Using a plugin to store a timestamp of last updated article. This is saved as ...
Cole Henley's user avatar
  • 1,741

Only top scored, non community-wiki answers of a minimum length are eligible