0

I have created some steps in magento 2 on saving the data an ajax is fired. I want to show loader between start and complete process how to i achieve that.

My JS file for saving the data is :

define(
[
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'mage/url'
],
function ($, quote, urlBuilder, errorProcessor, urlFormatter) {
'use strict';

return {
    /**
     * Save SimpleNote ibn the quote
     *
     * @param simpleNote
     */
    $('body').trigger('processStart');
    save: function (simpleNote) {
        if (simpleNote) {
            var quoteId = quote.getQuoteId();
            var url;

            url = urlBuilder.createUrl('/carts/mine/set-simple-note', {});

            var payload = {
                cartId: quoteId,
                simpleNote: {
                    simpleNote: simpleNote
                }
            };

            if (!payload.simpleNote.simpleNote) {

                return true;
            }

            var result = true;

            $.ajax({
                url: urlFormatter.build(url),
                data: JSON.stringify(payload),
                global: false,
                contentType: 'application/json',
                type: 'PUT',
                async: false
            }).done(
                function (response) {
                    result = true;
                    $('body').trigger('processStop');
                }
            ).fail(
                function (response) {
                    result = false;
                    errorProcessor.process(response);
                    $('body').trigger('processStop');
                }
            );

            return result;
        }
    }
};
});
2
  • I don't see you calling a loader. what have you tried? Commented Aug 24, 2020 at 13:17
  • Yes i have added loader in define parameter and added that in $.ajax code like showLoader: true but it doesn't show @PhilippSander
    – Prits
    Commented Aug 24, 2020 at 14:55

2 Answers 2

1

You can show the loader with $('body').trigger('processStart'); and hide it with $('body').trigger('processStop');.

define(
[
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'mage/url'
],
function ($, quote, urlBuilder, errorProcessor, urlFormatter) {
'use strict';

return {
    /**
     * Save SimpleNote ibn the quote
     *
     * @param simpleNote
     */
    save: function (simpleNote) {
        if (simpleNote) {
            var quoteId = quote.getQuoteId();
            var url;

            url = urlBuilder.createUrl('/carts/mine/set-simple-note', {});

            var payload = {
                cartId: quoteId,
                simpleNote: {
                    simpleNote: simpleNote
                }
            };

            if (!payload.simpleNote.simpleNote) {

                return true;
            }

            var result = true;

            $.ajax({
                url: urlFormatter.build(url),
                data: JSON.stringify(payload),
                global: false,
                contentType: 'application/json',
                type: 'PUT',
                async: false,
                beforeSend: function() {
                    $('body').trigger('processStart');
                }
            }).done(
                function (response) {
                    result = true;
                }
            ).fail(
                function (response) {
                    result = false;
                    errorProcessor.process(response);
                }
            ).always(
                function() {
                    $('body').trigger('processStop');
                }
            );

            return result;
        }
    }
};
});
11
  • Thanks for your response where should i use that piece of code like after if or on $.ajax({}) @Ben
    – Prits
    Commented Aug 24, 2020 at 14:56
  • You can likely show the loader before your AJAX request and hide it after the AJAX request as you have async set to false.
    – Ben Crook
    Commented Aug 24, 2020 at 15:41
  • Like this i have updated in my code is it correct will you please check @Ben
    – Prits
    Commented Aug 24, 2020 at 15:44
  • No that will likely error as you're trying to run a function as a property of an object. I have updated my answer with some code that should work for you.
    – Ben Crook
    Commented Aug 25, 2020 at 8:07
  • I have updated your code but it doesn't show the loader.@Ben
    – Prits
    Commented Aug 25, 2020 at 8:46
0

In code when you want to show loader, put this code :

showLoader: true
3
  • I have added this in $.ajax({ url: urlFormatter.build(url), data: JSON.stringify(payload), global: false, contentType: 'application/json', type: 'PUT', async: false, showLoader: true }) this code but it doesn't show loader i have added loader on define too.but doesn't seems show. @Dhiren
    – Prits
    Commented Aug 24, 2020 at 14:51
  • Any error on console? Commented Aug 25, 2020 at 9:52
  • Yes it shows [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience @Dhiren Will You please help.
    – Prits
    Commented Aug 25, 2020 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.