Skip to main content
25 votes
Accepted

How to enable AJAX for the the 'Add to Cart' button of product widgets in Magento 2?

You have to override addtocart.phtml file app/design/frontend/vendorname/themename/Magento_Catalog/templates/product/view/addtocart.phtml Now Just Replace "bindSubmit": false to "bindSubmit": true &...
Prince Patel's user avatar
  • 22.8k
24 votes
Accepted

How to make a simple ajax call in Magento 2.1.0

below is the example how to do this, Please modify it according to your requirement. I used js template for this. Following example will create drop down in your phtml file using ajax functionality. ...
Ekta Puri's user avatar
  • 1,116
24 votes

How to render HTML with AJAX in Magento 2

I would also go the way 2 and, indeed, you actually can render "pure" HTML via AJAX without the head, body, css and so on. The trick is to: tell your controller to instanciate a Response that is of ...
Hervé Guétin's user avatar
22 votes
Accepted

Magento 2: How to send data using Ajax form in custom form?

You can just set below code in your phtml file to use ajax, You have to change your customurl in below code, <script type="text/javascript"> require(["jquery"],function($) { $(...
Rakesh Jesadiya's user avatar
20 votes

Magento 2 : Show loader till all ajax call not completed

You can try below ajax call for showing loader during ajax call is runnig. jQuery.ajax({ url: url, type: 'POST', dataType: 'json', showLoader: true //use for display loader }).done(...
Jaimin Parikh's user avatar
20 votes

Magento 2: How to send data using Ajax form in custom form?

Accepted answer is good, but i think could be useful take advantage of the js validation that magento core offers. So, try to use below js script: <script type="text/javascript"> require([ "...
LucScu's user avatar
  • 2,332
19 votes
Accepted

How to update minicart view using AJAX?

You can try the below code. require([ 'Magento_Customer/js/customer-data' ], function (customerData) { var sections = ['cart']; customerData.invalidate(...
Suresh Chikani's user avatar
16 votes
Accepted

Magento 2 - Send form data to Controller using AJAX and return Result to PHTML

Calculation Layout - Vendor/Module/view/frontend/layout/module_index_index.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="...
Dinesh Yadav's user avatar
  • 6,457
14 votes
Accepted

Dynamic create block in magento 2 and send as ajax call response?

You can try following way to create new block inside controller <?php namespace [Vendor]\[Module]\Controller\[ControllerName]; use Magento\Framework\App\Action\Context; class [...
Sohel Rana's user avatar
  • 35.9k
13 votes
Accepted

Magento 2 : How do I create my own action in controller to call url from Ajax in Magento 2.x

You can use the code below your own Action in controller to call url from Ajax. Using phtml file. In your (Like vendor/module/Block/Example.php) block put below code. public function getAjaxUrl(){ ...
Payal Patel's user avatar
  • 1,511
13 votes
Accepted

Retreive and return response from controller in magento2

ajax <script> require(['jquery', 'jquery/ui'], function($){ $.ajax({ method: "POST", url: "<?php echo $block->getUrl('modulanefrontname/ajax/search'); ?>",...
Qaisar Satti's user avatar
  • 32.5k
12 votes

Magento 2 automatically appends form key at the end of my ajax call

Magento 2 adds the form key and the isAjax by using jQuery's beforeSend handler. to remove it override the beforeSend handler with and empty function for example. You can also put the form_key in the ...
F. Perrin's user avatar
  • 176
12 votes
Accepted

Return bool gives error "Invalid return type" for Ajax Controller

Try this example: protected $resultJsonFactory; /** * @param Context $context * @param \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory */ public function __construct( ...
Siarhey Uchukhlebau's user avatar
10 votes
Accepted

Magento 2 : Modal Popup using Ajax

define([ 'jquery', 'Magento_Ui/js/modal/modal' ], function ($,example,modal) { var options = { type: 'popup', responsive: true, innerScroll: true, ...
Payal Patel's user avatar
  • 1,511
9 votes
Accepted

How to submit a form to controller using ajax with magento 2 validation

Try this: if (jQuery('#donation-request-form').valid()) { jQuery.ajax({ type : 'POST', url : customurl, data : jQuery('#donation-request-form').serialize(), success: function(msg){...
Nero Phung's user avatar
  • 1,318
9 votes

How to update cart qty using ajax Magento 2

Reload totals cart after ajax change quantity 1. Step In your custom them create ( Magento_Theme/layout/checkout_cart_index.xml ) <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ...
Surendra Kumar Ahir's user avatar
8 votes

Retreive and return response from controller in magento2

Try with below code in controller, <?php namespace Vendor\Modulename\Controller\Index; use Magento\Framework\Controller\ResultFactory; class Custom extends \Magento\Framework\App\Action\...
Rakesh Jesadiya's user avatar
8 votes

Magento 2: How shipping rest api function called On Checkout?

As you pointed out, when you click "Ship here" a HTTP POST request is dispatched to "/V1/carts/mine/estimate-shipping-methods-by-address-id" REST API (from module-quote). If you take a look at module-...
Alex Constantinescu's user avatar
8 votes

Magento 1.9.3.3 - How do you return a JSON array from a controller to ajax

use this one. public function suburbSearchAction() { /* Get Suburb text from POST Request */ $suburbNameQuery = $this->getRequest()->getParam('inputSuburbData'); /*...
Magento2 Devloper's user avatar
8 votes
Accepted

Magento 2 - Add to cart not working after products loaded by ajax

I found the solution of this one few times ago but forgot to post it. I just add this line in my ajax request success case jQuery( "form[data-role='tocart-form']" ).catalogAddToCart(); require([ '...
Muhammad Hasham's user avatar
8 votes
Accepted

Invalid form key while making an ajax request in Admin panel in Magento 2.3

Please try to update below your script code : <script type="text/javascript"> require([ "jquery" ], function($){ $('#submit-button').on('click',function(){ ...
Anas Mansuri's user avatar
  • 2,627
7 votes

How to enable AJAX for the the 'Add to Cart' button of product widgets in Magento 2?

You can extend the Catalog Products List to use the ajax cart by creating a module with the following files: /Your/Module/Block/Product/ListBlock.php with content: <?php namespace Your\Module\...
Aaron Allen's user avatar
  • 9,009
7 votes
Accepted

Magento 2 : Update Cart summary html

Update cart summary in ajax response has been solved, we need to call getTotalsAction() javascript function as i mentioned below code : demo.js define([ 'jquery', 'Magento_Checkout/...
Lucky's user avatar
  • 315
7 votes
Accepted

Magento 2 - Ajax is not calling Controller

Error 500 (internal server error) - something went wrong on the server side. We need to add use Magento\Framework\App\Action\Context at the first of class. Or, change Context to Magento\Framework\...
Khoa TruongDinh's user avatar
7 votes

how to call controller using ajax in admin backend magento 2

Our Ajax response should return the key values. We can create an Admin controller like: app/code/Vendor/Module/Controller/Adminhtml/CustomAjax/Index.php <?php namespace Vendor\Module\Controller\...
Khoa TruongDinh's user avatar
7 votes
Accepted

Magento2 - Ajax Add to Cart - Out of stock situation - Stop redirect and show message dynamically

In order to achieve this, you need to follow these steps: 1) Override Magento2 default theme js file by copying it from this path: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-...
Toms Bugna's user avatar
7 votes

Magento 2: how to send ajax request in knockout js?

Use mage/storage for ajax call in knockoutjs define( [ ... 'mage/storage' ... ], function( ... storage ... ) { return ...
Prince Patel's user avatar
  • 22.8k
7 votes

How to get the Quote Id from Masked Quote Id (QuoteIdMask) in magento 2

Since 2.3 version of Magento you can use the \Magento\Quote\Model\MaskedQuoteIdToQuoteIdInterface::execute(string $maskedQuoteId) to obtain a real quote id (int): <?php namespace Vendor\Module\...
Siarhey Uchukhlebau's user avatar
7 votes
Accepted

Plus, Minus, automatic cart update on Magento 2.3.3

Override default.html from vendor\magento\module-checkout\view\frontend\web\template\minicart\item\default.html to app\design\yourvendor\yourtheme\Magento_Checkout\web\template\minicart\item\...
Ranganathan's user avatar
  • 3,220
6 votes

Magento 2 : Add to compare and add to wishlist with ajax

I have added Ajax add to wishlist functionality on product page following below method: Added custom "Add to wishlist" button to following file inside <?php if ($block->isWishListAllowed()) : ?&...
amitshree's user avatar
  • 7,036

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