Question

For some reason, my Ajax loader icon is not showing and hiding as it should. Here’s my snippet of jQuery code that handles the ajax call. I can see the #loading DIV with Chrome’s Developer Tools…the problem lies is that jQuery is not showing the DIV (inline style set to display:none on the div itself). If I remove that inline style, it shows up where it should…

Anything I’m missing here?

//website URL grab - Ajax call
$('.loadBTN').on("click", function(){

    var check_url = $('#web_address').val();

    if (!check_url || check_url == 'http://') { // form validation
        //alert('Please enter valid URL');
        // Do nothing
        return false;
    };

    var web_url = {
        url: $('#web_address').val(),
        ajax: '1' // needed for controller, to verify that request is ajax
    };         

    //display ajax loader animation
    $('#loading').show();

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        success: function(msg) {
            $('#ajaxContent').html(msg); // output success in this container
            $('#loading').hide();
        } 
    });        


    return false;
}); 

Answer 1

I would suggest subscribing to all ajax start/stop events, independently of who’s responsible for it:

$("#loading")
    .ajaxStart(function(){ $(this).show(); })
    .ajaxStop(function(){ $(this).hide(); });

The loading will appear as soon as there is an ajax request, then hide when there is no ajax requests ongoing…

See http://api.jquery.com/ajaxStart/