CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Rohit Kumar
Rohit Kumar

Reputation: 806

Loading Data using ajax not displaying loading div using show/ hide or block/none working

For the below function I am trying to show a loading screen while ajax request retrieves the records from database. But some how neither jquery show() and hide() function nor javascript element.style.display="Block" working.

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

}

I did tries using async: false too. But this also didn't solved my problem.

Upvotes: 0

Views: 832

Answers (2)

JSON
JSON

Reputation: 1182

Do this. First get rid of the try catch. Second set the method back to be async. Disabling async will freeze the screen until the request is complete. Probably why you never see anything. It is hidden again by the time you continue the thread. Third set your show() and hide() in the berforeSend and complete handlers

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

Upvotes: 1

Fraz Abbas
Fraz Abbas

Reputation: 168

try delaying try catch block using 'timeout()'

Upvotes: 0

Related Questions