Ajax Loader图像未在Magento2中的Ajax呼叫中显示

Question

我尝试调用ajax调用它的工作正常但加载图像在加载时未显示

下面是一个代码，当您更改国家/地区，它将调用AJAX呼叫和加载区域

<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>

.

和控制器文件是 app \ code \ sugarcode \ test \ controller \ 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)
        );
    } 

  }

.

任何人都可以帮助我！： - ）

Answer 1

您需要SET SHOULLOADER：true以显示上下文元素的加载程序（默认值：body）。示例：

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);
    });
});

.

查看官方加载程序小部件有关更多详细信息的文档

Answer 2

我得到了在Ajax呼叫中错过了一个参数，即

  showLoader:true,

.

是

<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>

.