Magento 2 – How to Use Loader Widget

javascriptmagento-2.1

I would like to show a loader using the Magento's default loader widget on my ajax call. When user clicks the submit button I would like to show the loader for 1 second and then hide it.

I am using something like this :

<script>
    require([
        'jquery',
        'jquery/ui',
        'mage/loader',

    ], function ($, loader) {
        $(function () { // to ensure that code evaluates on page load

           $.ajax({
             ... 
            })

Best Answer

It's impressively simple:

 $('body').trigger('processStart');

And to remove it

$('body').trigger('processStop');

Source code can be found here.

Result:

Note on loading scripts after page load

Quick tip, if a require JS file is required on page load add domReady! as a dependency rather than the jQuery function method. If you do it with a jQuery function other modules will not be aware of the page load dependency.

Answer

To force it to load after jQuery in the head don't use addJs, rather use <action method="addItem"><type>skin_js</type> as skin is loaded after libraries (addJs)

As a side note

My preferred method of scripting custom jQuery is to add templates to before_body_end; there is no addJs action for this so instead you'll be creating a template file which includes the script tag with getSkinUrl. This ensures that your script is non-blocking. In Magento this may be considered to be laughable (due to the vast number of scripts in head) but rather adhere to best practice where your customizations are concerned.
Rather than use jQuery the RWD framework uses noConflict to alias it to $j:

File: skin/frontend/rwd/default/js/app.js

// ==============================================
// jQuery Init
// ==============================================

// Avoid PrototypeJS conflicts, assign jQuery to $j instead of $
var $j = jQuery.noConflict();

JavaScript – How to Validate Response in Text Box

I would use magento form validation class, then create a new "remote validation", take a look at Magento form field AJAX validation

In your phtml file add

<script>

Validation.add('validate-customer-id', 'Please enter a valid id. For example xxx-yy-mmm.', function(v) {     

    // do your OMS webservice call in your controller 
    // you could use post this need to be secure
    var url = '<?php echo $this->getUrl('checkout/OnepageController/checkid', array('id' => 2345))?>' + encodeURIComponent(v);

    var result = false;

    new Ajax.Request(url, {
        method: 'get',
        asynchronous: false,
        onSuccess: function(transport) {
            var obj = response = eval('(' + transport.responseText + ')');

            if (obj.is_available === 0) {
                result = false;
            } else {
                result = true; /* return true or false */    
            }
        }
    })

    return result;
});

</script>

Update your input with

<input ... class=".. validate-customer-id" />

In your controller

public function checkidAction()
{
    $id = $this->getRequest()->getParam('id');
    if ($id=='1234')
    {
       $status = array('is_available' => 0);
    }
    else
    {
       $status = array('is_available' => 1);
    }

    echo json_encode($status);
}

Also see Magento prototype custom validation

Best Answer

Related Solutions

Magento CE 1.9.0.1 – Unable to Use jQuery

Answer

As a side note

JavaScript – How to Validate Response in Text Box

Related Topic