Ajax loader image is not displaying in ajax call in Magento2

Question

I try to to call ajax call its working fine but loader image is not displaying at the time of loading

below is a code when you change country it will call ajax call and load region

<script type="text/javascript">
                require([
                'jquery',
                'mage/template',
                'jquery/ui',
                'mage/translate'
            ],
            function($, mageTemplate) {
               $('#edit_form').on('change', '#country_id', function(event){
                    $.ajax({
                           url : '". $this->getUrl('test/*/regionlist') . "country/' +  $('#country_id').val(),
                           type: 'get',
                        dataType: 'json',
                           success: function(data){
                                $('#region_id').empty();
                                $('#region_id').append(data.htmlconent);
                           }
                        });
               })
            }

        );
        </script>

and controller file is app\code\Sugarcode\Test\Controller\Adminhtml\Lists\Regionlist.php

<?php
/**
 *
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

namespace Sugarcode\Test\Controller\Adminhtml\Lists;

/**
 * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
 */
class Regionlist extends \Magento\Framework\App\Action\Action
{
            /**
         * @var \Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;
    /**
     * @var \Magento\Directory\Model\CountryFactory
     */
    protected $_countryFactory;

        /**
         * @param \Magento\Framework\App\Action\Context $context
         * @param \Magento\Framework\View\Result\PageFactory resultPageFactory
         */
        public function __construct(
            \Magento\Framework\App\Action\Context $context,
            \Magento\Directory\Model\CountryFactory $countryFactory,
            \Magento\Framework\View\Result\PageFactory $resultPageFactory
        )
        {
            $this->_countryFactory = $countryFactory;
            $this->resultPageFactory = $resultPageFactory;
            parent::__construct($context);
        }
    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {


        $countrycode = $this->getRequest()->getParam('country');
        $state = "<option value=''>--Please Select--</option>";
        if ($countrycode != '') {
            $statearray =$this->_countryFactory->create()->setId(
                    $countrycode
                )->getLoadedRegionCollection()->toOptionArray();
            foreach ($statearray as $_state) {
                if($_state['value']){
                    $state .= "<option >" . $_state['label'] . "</option>";
            }
           }
        }
       $result['htmlconent']=$state;
         $this->getResponse()->representJson(
            $this->_objectManager->get('Magento\Framework\Json\Helper\Data')->jsonEncode($result)
        );
    } 

  }

can any one help me ! :-)

Answer 1

You need set showLoader: true to show loader for context element (default: body). Example:

require([
    'jquery',
    'mage/template',
    'jquery/ui',
    'mage/translate'
], function($) {
    $.ajax({
        url: ". json_encode($this->getUrl('test/*/regionlist')).",
        data: {country: $('#country_id').val()},
        type: 'get',
        dataType: 'json',
        showLoader: true,
        context: $('#edit_form')
    }).done(function(data){
        $('#region_id').empty().append(data.htmlconent);
    });
});

See official loader widget documentation for more details

Answer 2

i got i missed one param in ajax call that is

  showLoader:true,

that is

<script type="text/javascript">
                require([
                'jquery',
                'mage/template',
                'jquery/ui',
                'mage/translate'
            ],
            function($, mageTemplate) {
               $('#edit_form').on('change', '#country_id', function(event){
                    $.ajax({
                           url : '". $this->getUrl('test/*/regionlist') . "country/' +  $('#country_id').val(),
                            type: 'get',
                            dataType: 'json',
                           showLoader:true,
                           success: function(data){
                                $('#region_id').empty();
                                $('#region_id').append(data.htmlconent);
                           }
                        });
               })
            }

        );
        </script>