CODEWITHSUNDEEP
jqueryajax
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25745

how do i determine if the script is being loaded in Ajax Using jQuery?

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?

Upvotes: 1

Views: 180

Answers (5)

laurac
laurac

Reputation: 429

yes, you can use ajaxStart, ajaxSend and ajaxStop to register a handler in an ajax request

$('#selected-countries').ajaxStop(function() {
  //do something....
});

see http://api.jquery.com/ajaxStop/

Upvotes: 0

Brian Scott
Brian Scott

Reputation: 9361

You can use any of the global ajax events that meet your needs here, you're probably after $.ajaxComplete() or $.ajaxSuccess() for completion and $.ajaxStart() for initiation.

Upvotes: 0

Piskvor left the building
Piskvor left the building

Reputation: 92762

From http://api.jquery.com/jQuery.ajax/ :

beforeSend(jqXHR, settings)
A pre-request callback function

error(jqXHR, textStatus, errorThrown)
A function to be called if the request fails

success(data, textStatus, jqXHR)
A function to be called if the request succeeds.

complete(jqXHR, textStatus)
A function to be called when the request finishes (after success and error callbacks are executed).

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function() {
        your_loading_function();
    },
    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);
        }   
    },
    complete: function() {
        clear_your_loading_message();
    }
});

Upvotes: 2

kasdega
kasdega

Reputation: 18786

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

Upvotes: 3

SeanCannon
SeanCannon

Reputation: 77966

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        beforeSend(jqXHR, settings) {
            // Here is your 'loading' state
            $('#select-states-container').html('Loading...');
        },
        complete: function(jqHXR, status) {
            // Here is your complete state, unbiased of success or fail
            alert('Ajax call completed');
        },
        error:function(jqXHR, textStatus, errorThrown) {
            // Here is your complete state with error
            $('#select-states-container').html(textStatus + ' -- ' + errorThrown);
        },
        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);
            }   
        }
    });
});

Upvotes: 1

Related Questions