Question

How do i determine if the script is being loaded in Ajax using jQuery, for example i am using the following jQuery/AJAX.

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        success: function(states){
            if(states == 'null') {
                $('#select-states-container').html(emptyState);
            } else if(states == '0') {
                $('#select-states-container').html(chooseState);
            } else {
                $('#select-states-container').html(states);
            }   
        }
    });
});

Now depending upon the loading state i want to display a message or display a loading gif, i would like to know if there are ajax states like on-loading, on-complete?

Answer 1

What I do is to pop up a loading dialog before the ajax call and then use ajax#complete() to remove it or change the mssage:

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function(jqXHR, settings) {
       // show the awesome dialog
    },
    complete: function(jqXHR, textStatus) {
       // remove the awesome dialog
    },
    error(jqXHR, textStatus, errorThrown) {
       // post the not so awesome message in the awesome dialog
    },
    success: function(states){
        if(states == 'null') {
            $('#select-states-container').html(emptyState);
        } else if(states == '0') {
            $('#select-states-container').html(chooseState);
        } else {
            $('#select-states-container').html(states);
        } 
        // change the message in the awesome dialog???
    }
});