Блог

Вот мой код. Что я делаю, так это когда я выбираю значение в первом раскрывающемся списке, значение в другом раскрывающемся списке автоматически извлекается и выбирается из базы данных. Но в настоящее время, когда я выбираю первый выпадающий экран, он становится неактивным на несколько секунд, и он становится неактивным при загрузке значения во втором списке выбора. Итак, что я хочу сделать, я хочу показать загрузчик до того, как значение во втором списке выбора не будет загружено.

Вот мой код :

 function GetRefferalContactDetails(_AgencyId) {
            $.ajax({
                url: '/SalesForce/GetReferralContactInfo',
                data: { agencyId: _AgencyId },
                cache: false,
                method: "POST",
                success: function (data) {
                    if (data == null) {
                        $("#ReferralInspectorId").html("");
                        $('#ReferralInspectorId').append($('<option>', {
                            value: '',
                            text: 'No Contacts to show'
                        }));
                    }
                    else {
                        $("#ReferralInspectorId").html("");
                        $.each(data, function (i, item) {
                            var fn = item.firstName || '';
                            var ln = item.lastName || '';
                            $('#ReferralInspectorId').append($('<option>', {
                                value: item.contactId,
                                text: fn   ' '   ln
                            }));
                        });
                    }
                }
            })
        }
  

Вы можете использовать функцию beforesend для использования загрузчика после завершения, загрузчик может скрыть

     beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  

Вы можете использовать отложенный объект для отображения загрузчика. Разрешите объект отсрочки при успешном выполнении, отклоните по ошибке.

Сохраните код в вызывающем методе:

 // Turn on the Loader
GetRefferalContactDetails(_AgencyId).done(function () {
// Turn off the Loader
});
  

Ваш метод:

 function GetRefferalContactDetails(_AgencyId) {
let deferred = jQuery.Deferred();
            $.ajax({
                url: '/SalesForce/GetReferralContactInfo',
                data: { agencyId: _AgencyId },
                cache: false,
                method: "POST",
                success: function (data) {
                    if (data == null) {
                        $("#ReferralInspectorId").html("");
                        $('#ReferralInspectorId').append($('<option>', {
                            value: '',
                            text: 'No Contacts to show'
                        }));
                    }
                    else {
                        $("#ReferralInspectorId").html("");
                        $.each(data, function (i, item) {
                            var fn = item.firstName || '';
                            var ln = item.lastName || '';
                            $('#ReferralInspectorId').append($('<option>', {
                                value: item.contactId,
                                text: fn   ' '   ln
                            }));
                        });
                    }
                   deferred.resolve();
                },
error: function () {
                deferred.reject();
            }
            })
        }
  

Примечание: свойство async также играет здесь роль. Пользовательский интерфейс будет заблокирован при использовании вашего async: false, поскольку jQuery является однопоточным.
Используйте async: true,. Чтобы поток пользовательского интерфейса был доступен для отображения загрузчика.