2

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 ! :-)

2 Answers 2

10

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

2
  • Yes it works perfect to help other users , we must have require([ 'jquery', 'mage/template', 'jquery/ui', 'mage/translate' to use loader
    – Rohit Goel
    Commented Aug 19, 2016 at 8:28
  • perfect that will help the community Thanks :)
    – Rohit Goel
    Commented Aug 19, 2016 at 10:20
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>

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.