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

9

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

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

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