Magento 2 : Display Loader While Ajax call on Column row action?

Question

Grid xml column:

<column name='actions' class='My\Test\Ui\Component\Listing\Columns\Feeds\AdvancedActions'> <argument name='data' xsi:type='array'> <item name='config' xsi:type='array'> <item name='component' xsi:type='string'>My_Test/js/grid/columns/actions</item> <item name='dataType' xsi:type='string'>text</item> <item name='label' xsi:type='string' translate='true'>Actions</item> <item name='sortOrder' xsi:type='number'>90</item> </item> </argument> </column>

Actions.js

define( [ 'jquery', 'underscore', 'mageUtils', 'uiRegistry', 'Magento_Ui/js/grid/columns/actions', 'Magento_Ui/js/modal/confirm' ], function ($, _, utils, registry, Column, confirm) { 'use strict'; return Column.extend( { /** * Applies specified action. * * @param {String} actionIndex - Actions' identifier. * @param {Number} rowIndex - Index of a row. * @returns {ActionsColumn} Chainable. */ applyAction: function (actionIndex, rowIndex) { var action = this.getAction(rowIndex, actionIndex), callback = this._getCallback(action); if (action.confirm) { this._confirm(action, callback); } else if (action.popup) { this._popup(action, callback); } else { callback(); } return this; }, _popup: function (action, callback) { var popupData = action.popup; var dataType = popupData.type; //Start loader var body = $('body').loader(); body.loader('show'); if (popupData.file !== undefined && popupData.file !== '') { $.ajax( { url: popupData.file, async: false, dataType: "text", type: 'GET', showLoader: true, //use for display loader success: function (data) { popupData.message = data; } } ); } //Stop loader body.loader('hide'); }, });

Used showLoader: true and var body = $('body').loader(); body.loader('show'); but unable to start loader while ajax request.

Need an alternative to start loader during ajax call.

Khoa Truong · Accepted Answer · 2019-03-06 09:33:52Z

0

I faced the same issue. In my case, I need to load the 'jquery/ui' dependency.

define( [ 'jquery', ... 'jquery/ui'

answered Mar 6, 2019 at 9:33

Khoa Truong

9331 gold badge13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Khoa Truong Over a year ago

Try to clear cache, and put jquery/ui as the last dependency.

Milind Singh Over a year ago

Tried but same issue.

Sanjib Chowdhury · Accepted Answer · 2019-11-14 11:59:00Z

Please have a look at the below code which might help.

define([ 'jquery', 'Magento_Checkout/js/model/full-screen-loader', ], function ($,fullScreenLoader ) { //Start Loader fullScreenLoader.startLoader(); //Your AJax COde here //Stop Loader fullScreenLoader.stopLoader(); });

Anton Suslov · Accepted Answer · 2019-12-12 10:08:19Z

Just add the loader dependency to the end:

define([ 'jquery', ... 'loader' ]

showLoader: true and var body = $('body'); body.loader('hide'); will start working.

Yogesh Agarwal · Accepted Answer · 2020-05-05 14:53:47Z

0

Try $('body').trigger('processStart') & $('body').trigger('processStop')

answered May 5, 2020 at 14:53

Yogesh Agarwal

1095 bronze badges

Comments

Vignesh Muthumariyappan · Accepted Answer · 2023-10-10 07:00:28Z

0

Because you using async: false try to refactor you code to change logic async: true ajax call

answered Oct 10, 2023 at 7:00

Vignesh Muthumariyappan

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Akshay Kothekar · Accepted Answer · 2024-09-18 11:46:36Z

In your JavaScript code that handles the row action, use the uiElement.loading to show and hide the loader during the AJAX call.

If you're working on a custom JS component that handles the action, you can do something like this:

js

define([ 'jquery', 'mage/url', 'mage/loader' ], function ($, urlBuilder) { 'use strict';

return function (rowData) { // Show loader before making the AJAX call $('body').loader('show'); $.ajax({ url: urlBuilder.build('your_module/controller/action'), data: {row_id: rowData.row_id}, // Adjust your data as needed type: 'POST', success: function (response) { // Process response }, error: function () { // Handle error }, complete: function () { // Hide loader when the AJAX call completes $('body').loader('hide'); } }); }; });

This will show the default Magento loader when the AJAX call starts and hide it when the call is complete.

Collectives™ on Stack Overflow

Magento 2 : Display Loader While Ajax call on Column row action?

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Related