Skip to main content
Share Your Experience: Take the 2024 Developer Survey
10 votes

How can I use CSRF protection with AJAX routes?

This is the syntax for Craft 3: <script type="text/javascript"> window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName }}"; window.csrfTokenValue = "{{ craft.app.request....
Ryan's user avatar
  • 1,952
10 votes
Accepted

How to load entries via ajax when a filter is clicked?

There's a ton of ways to pull this off, but in my opinion setting up pages/URLs for each category is probably a good idea, for SEO and sharing reasons. It's not something that requires a lot of work ...
Mats Mikkel Rummelhoff's user avatar
9 votes
Accepted

Updating a user on the front end with Vue.js and Axios

Unlike Vue Resourse (if you've used it), Axios does not have a good way to emulateJSON on legacy servers or frameworks that do not understand submissions sent as application/json. Your data gets to ...
Selvin Ortiz's user avatar
  • 1,623
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
8 votes

Basic ajax - how to?

There is no real difference between a "normal" ajax request and an ajax request in Craft. You just leave the url blank, and insert an action parameter for your route. Craft 3 uses snake-case routes ...
Robin Schambach's user avatar
7 votes
Accepted

How to load entry-objects with Ajax

Is it best to use jQuery for the Ajax-request?` Not necessarily. jQuery provides an easy-to-use ajax function, but nowadays it's perfectly simple to make an AJAX call with vanilla JS. How can I ...
Michael Rog's user avatar
  • 3,420
6 votes

How can I set the HTTP status code?

In Craft3, the correct way of setting HTTP status codes is Craft::$app->getResponse()->setStatusCode(404);
pabloroman'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,506
5 votes
Accepted

Possible to change locale in PHP?

I think I got this resolved the proper way... looks like you just need to make sure that your AJAX calls are localized. In my main _layout template: <script type="text/javascript"> window....
Lindsey D's user avatar
  • 24k
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

What is the best way to append CSRF token without using a form?

This is the syntax for Craft 3: <script type="text/javascript"> window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName }}"; window.csrfTokenValue = "{{ craft.app.request....
Ryan's user avatar
  • 1,952
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

How can I use Ajax function in Craft CMS?

Since Craft makes no assumptions about the front-end content of your website, it's 100% up to you on how you want to implement AJAX functionality on your site. So it wouldn't be any different if you ...
Brad Bell's user avatar
  • 67.5k
4 votes
Accepted

Update cart lineItems through ajax

There are two major approaches. The easier approach is to create a partial template that displays the cart lineItems, and simply ajax load that template in to a div that is your cart display after ...
Jeremy Daalder's user avatar
4 votes

Craft CMS plugin with AJAX gives 404 error

If you aren't currently logged in, you're apt to be running up against the "anonymous access" limitation. This section of the Controller documentation should help: By default, controller actions ...
August Miller's user avatar
4 votes
Accepted

CSRF in “Headless” Applications

A similar question was asked in the Craft Slack today, so I thought I'd transcribe the consensus: Internally, CSRF tokens come from a call to Craft::$app->getRequest()->getCsrfToken(). This ...
August Miller's user avatar
4 votes

How could I include another template on a click with ajax?

Primarily, this is a Javascript question, not a Craft CMS question. For the Javascript part of this, I would look for general AJAX tutorials or try searching on Stack Overflow. But rather than ...
Alex Roper's user avatar
  • 2,632
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,304
4 votes
Accepted

How to create a follow system "button" for "Event" entries?

This functionality is comprised of multiple components – you need to build the interface, keep track of which visitor follows which events, potentially do something with that information and change up ...
MoritzLost's user avatar
  • 11.4k
3 votes

Refreshing meta data when using AJAX page transitions

You'll need to send the new pageview to Google Analytics manually on your ajax success. You'll want to read the Google documentation page, but it can be as simple as added the following line where ...
Luke Pearce's user avatar
  • 3,863
3 votes
Accepted

Is it possible to update a Twig variable based on user interaction without page refresh?

I'm the developer of Charge. You need to go about the form setup a slightly different way. By design there are 2 ways to define the value for a Charge, either Setting the planAmount variable in ...
Joel Bradbury's user avatar
3 votes
Accepted

Ajax layout sample

You're not specific about what your Ajax template should return (HTML, JSON...?) – but assuming you want your payload in JSON format, here's a basic layout example which will 1) test if the current ...
Mats Mikkel Rummelhoff's user avatar
3 votes

ElementAPI - Can I use javascript/ajax to load json

You better use GET rather than POST : $(function () { var data = { 'CSRF': $('input[name="CRAFT_CSRF_TOKEN"]').val(), }; $.ajax({ 'type': 'get', 'contentType': '...
benoit_mire's user avatar
3 votes

ElementAPI - Can I use javascript/ajax to load json

Totally do-able. Once you have the ElementAPI plugin downloaded and installed, you'll want to make sure you have created a file called elementapi.php and it is in your /craft/config/ directory. For ...
Damon's user avatar
  • 4,706
3 votes

How can I set the HTTP status code?

HeaderHelper::setHeader(array('status' => 404));
Brad's user avatar
  • 487
3 votes
Accepted

How do I add meta data and a page title through ajax?

You almost certainly don't have to update the meta tags when you use AJAX to load pages like this. Meta tags are not exposed to the end user; they're there for search engine crawlers and social media ...
Mats Mikkel Rummelhoff's user avatar
3 votes
Accepted

How to do an ajax submission to Craft Contact Form with attachments using FormData?

I have it working now using this: $('#Form').submit(function(ev) { // Prevent the form from actually submitting ev.preventDefault(); var formData = new FormData($(this)[0]); // Send it to the ...
SteveO's user avatar
  • 336
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

AJAX Front-end User Registration Form not displaying macro errorList

No errors are displayed because you are using AJAX to post your data. The errorList function works only with "regular" POST flow. When ajax response is available you need to grab it and append errors ...
Krzysztof Boduch's user avatar
3 votes
Accepted

Load new entry(s) in the same page with ajax as a popup

First: you need to create a Plugin, I suggest you to use Pluginfactory.io to create your boilerplate and read the docs about plugin development You'll need an ajax Request that could look like $('#...
Robin Schambach's user avatar

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