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....
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 ...
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 ...
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 ...
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 ...
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 ...
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);
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.
...
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 ...
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 }}"...
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....
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'...
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 ...
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 ...
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.
...
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 ...
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....
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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
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 ...
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': '...
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 ...
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 ...
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 ...
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) {
...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
ajax × 174plugin-development × 27
craft3 × 18
javascript × 18
templating × 17
form × 16
controller × 13
csrf × 13
plugin-craftcommerce × 11
jquery × 10
filter × 8
frontend × 8
entries × 7
categories × 7
pagination × 7
json × 7
plugins × 6
plugin-contactform × 6
guest-entries × 6
plugin-elementapi × 5
frontend-form × 5
control-panel × 4
search × 4
php × 4
user-profile × 4