Hot answers tagged

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,942
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,400
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

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. ...
zackspear's user avatar
  • 545
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,266
5 votes
Accepted

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

You need to pass the token and name into javascript. Easiest is to just have a script tag somewhere. <script type="text/javascript"> window.csrfTokenName = "{{ craft.config.csrfTokenName }}"...
megatrond's user avatar
  • 1,342
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
  • 23.9k
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.2k
4 votes
Accepted

How to check for new entries periodically from the front-end?

This is actually a pretty simple task. Create a template that your JS will reach out to returning the total number of entries. First create a template folder called "ajax" with an index.html file ...
Bryant's user avatar
  • 231
4 votes
Accepted

Call plugin controller from frontend with ajax

I found the solution by making an application of Front end login form with ajax and Posting to controller actions. Here is what is really important to understand with Craft controller call: Most ...
Miguel Bocquier's user avatar
4 votes
Accepted

How can I call a controller method from the front-end using ajax

Make sure to check out the documentation on routing. Pay special attention to the part about action request(s). In this example, I want to call a controller method via ajax on page load. ...
Damon's user avatar
  • 4,706
4 votes
Accepted

Ajax Post to guestEntries/saveEntries from another domain

TL;DR: Turns out this was an issue with my apache config on the Craft instance. Explanation: I did a little digging around the GuestEntriesController.php file and noticed that Craft was not picking ...
Rob Erskine's user avatar
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,942
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.2k
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

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,622
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
  • 4,924
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
  • 10.7k
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
Accepted

Template for submit via ajax to Guest Entries plugin

There are some problems with your JavaScript that I expect is the cause of your issue. From your code I'm assuming you're using jQuery Validate to validate the form before submission. Your first ...
Mats Mikkel Rummelhoff's user avatar
3 votes
Accepted

Loading related entries by category using a select menu

You can do this using the relatedTo param. {# Get the selected category ID from a 'catId' query string param #} {% set catId = craft.request.getQuery('catId') %} {# Define the 'relatedTo' param ...
Brandon Kelly's user avatar
3 votes

Front-end form submission feedback on buttons

I'd say your best bet would be to use something like jQuery to make an AJAX call and then manipulate the DOM depending on what response you get. Something like: $('#loginForm').submit( function (e) { ...
Alec Ritson's user avatar
  • 4,519

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