Загрузка данных с использованием ajax не отображает загрузочный div с использованием show / hide или block / none working

Question

Для приведенной ниже функции я пытаюсь показать экран загрузки, пока запрос ajax извлекает записи из базы данных. Но кое-как не работают ни функции jquery show () и hide (), ни javascript element.style.display = "Block".

 function AdvanceSearch()
{
    document.getElementById('divloading').style.display = "Block";
    var _Pets = 0;
    var _WantPets = 0;
    try {

        $.ajax({
            type: 'post',
            url: '/CommonServices/MatchMe_DetailsAdvanceSearch',
            dataType: 'json',
            async: false,
            //contentType: "application/json; charset=utf-8",
            data: {
                Pets: _Pets,
                WantPets: _WantPets,    
            },

            success: function (data)
            {

                $('#ListOfWhoMatchesMyProfile').html("");
                $('#MatchMePagination').html("");
                var response = JSON.parse(data);
                _responseData = response.Records;
// html string is creating using the records.
                  $('#divloading').delay(2000).hide(20000);

            },

            error: function (ex) {
                document.getElementById('divloading').style.display = "None";
                alert('Failed to Retrieve List of Profile matched with your preferences .' + ex.Text);
               // $('#divloading').show();
            }
        });




    } catch (e)
    {
        alert(e.message);
        document.getElementById('divloading').style.display = "None";
        //$('#divloading').show();
    }

}

Я тоже пытался использовать async: false. Но это также не решило мою проблему.

Answer 1

Сделай это. Сначала избавьтесь от попытки поймать. Затем установите метод обратно как асинхронный. Отключение асинхронного режима приведет к зависанию экрана до завершения запроса. Вероятно, почему вы никогда ничего не видите. Он снова будет скрыт к тому времени, когда вы продолжите поток. В-третьих, установите ваши show () и hide () в berforeSend и завершите обработчики

var _Pets = 0;
var _WantPets = 0;
try {

    $.ajax({
        type: 'post',
        url: '/CommonServices/MatchMe_DetailsAdvanceSearch',
        dataType: 'json',

        //contentType: "application/json; charset=utf-8",
        data: {
            Pets: _Pets,
            WantPets: _WantPets,    
        },
        beforeSend: function(){
            document.getElementById('divloading').style.display = "Block";
        },
        complete: function(){
            document.getElementById('divloading').style.display = "None";
        },
        success: function (data)
        {

            $('#ListOfWhoMatchesMyProfile').html("");
            $('#MatchMePagination').html("");
            var response = JSON.parse(data);
            _responseData = response.Records;

        },

        error: function (ex) {
            document.getElementById('divloading').style.display = "None";
            alert('Failed to Retrieve List of Profile matched with your preferences .' + ex.Text);
           // $('#divloading').show();
        }
    });

Answer 2

попробуйте отложить попробуйте перехватить блок , используя 'timeout ()'