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 ...
- 22.1k
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 ...
- 34.1k
8
votes
Accepted
JS templating in Craft CP
The only JS library that ships with Craft (besides the Craft-specific Garnish) is jQuery. Of course, jQuery is a helpful JS library, but by no means a full-fledged framework. Fortunately, adding a ...
- 23.8k
7
votes
Access add and remove events with the Craft Element Selector?
As of Craft 2.4.2688:
It is now possible to access Craft.BaseElementSelectInput objects
from their container elements, via .data('elementSelect').
On select element:
$('#theElementSelectField')....
- 719
7
votes
Accepted
Update Commerce Cart using Ajax
Yes, you can do all the normal commerce actions via ajax.
A basic recipe is this...
HTML:
<form method="POST" id="addToCartForm">
{{ getCsrfInput() }}
<input type="...
- 7,592
6
votes
Accepted
AJAX page transitions with history.pushState
So I just went through my article step-by-step and I indeed missed adding the new content into $main. I think there may have been a versioning mistake in the article's code as I definitely tested it.
...
- 535
6
votes
Trigger Task Status Icon
I use this to force the task icon to show up immediately:
Craft.cp.setRunningTaskInfo({
"id": "task ID",
"level": "0",
"description": "description",
"status": "running",
"progress"...
- 1,173
6
votes
Accepted
Are there callbacks for elementSelect macro?
You can get the Element Select’s JS instance like so:
$(document).ready(function() {
var elementSelect = $('#your-container-id').data('elementSelect');
});
(Replace your-container-id with whatever ...
- 34.1k
6
votes
Accepted
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 ...
- 7,136
5
votes
Accepted
Can you pass a variable with includeJsFile?
You can't pass a JS variable into a JS file (that doesn't quite make sense). What you can do is to create a JS variable, and make it accessible to the script you are including.
So you'd include your ...
- 23.8k
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'...
- 67k
4
votes
Accepted
Can I set a JS variable to a Twig output tag?
Looks like you're actually off-track in a couple of different ways...
ElementCriteriaModel
This code is going to return an ElementCriteriaModel:
craft.tags.group('gameTags')
Think of an ...
- 23.8k
4
votes
Can I set a JS variable to a Twig output tag?
In your first example, you are outputting an ElementCriteriaModel. That is a query for tags rather than the tags themselves. It doesn't output anything usable by JS You're almost doing the same in the ...
- 4,055
4
votes
Get value from dropdown and use in Twig
Twig (and all php) is processed server-side before javascript even gets initiated. And once the page renders in the browser there no way to interact directly with twig. The only two options that you ...
- 13.4k
4
votes
minify javascript with includeJS
I don't believe there is a way to minify javascript when it is output to the page. If there is it would make for increased load time. My suggestion is to use a preprocessor like Gulpjs or Gruntjs.
...
- 2,837
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 ...
- 22.1k
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 ...
- 3,298
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 ...
- 22.1k
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 ...
- 2,009
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-...
- 4,639
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">
- 41
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 ...
3
votes
JS - Determine that an entry is unsaved?
Craft checks if a form has changed using javascript in the cp.js file, see line 196.
You could replicate this quite easily yourself though, here is a stripped down example:
var initialFormValues = $(...
- 7,136
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"...
- 13.3k
3
votes
JS templating in Craft CP
There's also Swig. We've successfully been able to share JS templating with Craft templates, and it's worked pretty well. Not without it's caveats, though. Mostly coming from slight syntax differences ...
- 3,071
3
votes
JS templating in Craft CP
There is no built in client side/JS templating available out of the box that I know of. You can always render Twig templates via Ajax by calling a plugin controller and returning a rendered HTML ...
- 3,821
3
votes
Is there an accessible callback when Craft.EntryTypeSwitcher is run?
The most reliable way I've found to listen for the entry type switching would be to add an ajaxComplete listener to the document object, testing the call's URL for the switchEntryType action handle:
$...
- 22.1k
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 ...
- 34.1k
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 ...
- 7,268
Only top scored, non community-wiki answers of a minimum length are eligible