Question

I am using jquery ajax to load a separate page into a modal window when a link is clicked. While the modal content is loading, I have a loading image that displays. The loading image is in a div on the page and is shown for any ajax loading on the page. This all works correctly, but I can’t seem to get the image to hide after the ajax call is successful.

Here is the jquery I am using:

$('#loadingImage').ajaxStart(function(){
    $(this).show();
});
$('#loadingImage').ajaxSuccess(function(){ //also tried ajaxStop
    $(this).hide();
});

function loadMap(){         
$('#whereweare-map').click(function(){
    $('#lightBox').removeClass().addClass('reveal-modal expand');
    $.ajax({
        url: '/Map#mapLoad',
        success: function(data){
            $('#lightBox').reveal();
            $('#lightBoxContent').html(data);         
        }
    });
       return false;
        });
    }
loadMap();

HTML:

<div id="imageLoading"></div>
<a href="#" id="whereweare-map">Where We Are</a>
<div class="reveal-modal" id="lightBox">
    <div id="lightBoxContent"><!-- Load Content Here --></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

And the CSS:

#loadingImage {
display:none; 
height:84px; 
width:84px; 
position:fixed; 
top:50%; 
left:50%; 
z-index: 1;
background: url('preloader.gif') no-repeat center center;
background-color: #000; 
background-color: rgba(0, 0, 0, 0.7);
-moz-border-radius:45px;
-webkit-border-radius:45px;
border-radius:45px;
}

Thanks for the help.

Answer 1

ajaxStart and ajaxStop are global functions. SO they respond to any ajax request on the page. Instead of showing/hiding the in these functions why don’t you do the same in the beforeSend and complete functions.. this makes sure the image is shown/hidden at the right times

function loadMap() {
    $('#whereweare-map').click(function () {
        var $loader = $('#loadingImage');
        $('#lightBox').removeClass().addClass('reveal-modal expand');
        $.ajax({
            url: '/Map#mapLoad',
            success: function (data) {
                $('#lightBox').reveal();
                $('#lightBoxContent').html(data);
            },
            beforeSend : function(){
               $loader.show();
            },
            complete : function(){
               $loader.hide();
            }
        });
        return false;
    });
}
loadMap(); 

Also instead of ajaxSuccess why don’t you try the ajaxComplete function to hide your div..

$('#loadingImage').ajaxComplete(function(){ //also tried ajaxStop
    $(this).hide();
});