asp.net-mvcjqueryloading-image

Jquery Ajax post animation during ajax process?


I do ajax post on my mvc app when dropdown change.

$(function () {
    $('#meters').change(function () {
        var analizor_id = $(this).val();
        if (analizor_id && analizor_id != '') {
            $.ajax({
                url: '@Url.Action("AnalizorInfoPartial", "Enerji")',
                type: 'GET',
                cache: false,
                data: { analizor_id: analizor_id },
                success: function (result) {
                    $('#TableAnalizorInfo').html(result);
                }
            });
        }
    });
});

DropDown

@Html.DropDownList("sno", new SelectList(Model, "sno", "AnalizorAdi"), "-- Analizör Seçiniz --", new { id = "meters" })

Can I show a loading image or anything else during ajax process? (between begin - finish event) and Code example?

EDIT

Can I use like this?

success: function (result) {
    $('#TableAnalizorInfo').html(result);
}
begin:function(){ 
    //show image
}
complete:function(){ 
    //hide image
}

Thanks.


Solution

  • Of course, the events you are looking for are beforeSend and complete:

    if (analizor_id && analizor_id != '') {
         $.ajax({
             url: '@Url.Action("AnalizorInfoPartial", "Enerji")',
             type: 'GET',
             cache: false,
             beforeSend: function() {
                 // Show your spinner
             }, 
             complete: function() {
                 // Hide your spinner
             },
             data: { analizor_id: analizor_id },
             success: function (result) {
                $('#TableAnalizorInfo').html(result);
            }
        });
    }
    

    or you could do it globally for all AJAX requests on the page using global AJAX event handlers:

    $(document).ajaxSend(function() {
        // Show your spinner
    }).ajaxComplete(function() {
        // Hide your spinner
    });