JQuery fadeOut not working for ajax post request

Question

I have this JQuery code:

$(function(){
    $('input#SearchGo').on('click', function(){
        var searchid = $('input#search').val();
        var dataString = 'search='+ searchid;
        $.ajax({
            type: "POST",
            url: "tickets.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#result").html(html).show();
            }
        });
        return false;    
    });
});

that does a live search and posts data to a PHP page.

On every page i have a div with an id of overlay with a loading image while the page loads, then this code:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

removes the overlay div once the page has loaded.

when i run the search query, the overlay div doesnt fadeOut at all, i tried adding $('#overlay').fadeOut(); within the success part of my function but it doesnt fadeOut the div.

UPDATE:

here is the HTML for the loading / overlay div

<div id="overlay" class="overlay">
     <img src="images/integra_loading.gif" alt="Loading" width="12%" style="margin-top:15%;" />
     <br /><br />
     <h1>Loading...</h1>
</div>

Answer 1

$(function(){//this says the dom is ready
    $('#overlay').fadeOut();
});

alternatively

$(document).on("ajaxComplete", function(){
    $('#overlay').fadeOut();
});

Answer 2

Don't hide your ajaxloader with a function that is called from the html script wich is loaded through the ajax request. just show the loader before the request and hide it before replacing the html content with your response.

function loader(){
    this.id = '#overlay'
};

loader.prototype.show = function(){
    $(this.id).fadeIn();
};

loader.prototype.hide = function(){
    $(this.id).fadeOut();    
};

loaderObj = new loader();

$('.list').live('click', function() {
    loaderObj.show();
    $.ajax({
        type: "GET",
        url: "http://echo.jsontest.com/uid/12345/value/nuno_bettencourt",
        cache: false,
        dataType: "json",
        success: function(json) {
            // setTimeout only to delay the response and let the loader do his thing ;)
            setTimeout(function(){
                loaderObj.hide();
                $('#ajaxResult').html("UID=" + json.uid + "\nName=" + json.value);    
            }, 2000);

        }
    });

i made you a small fiddle example http://jsfiddle.net/358Fz/1/

Answer 3

after doing your $.ajax, add a done. in that done, do the fadeout!

    $.ajax({
         ...
    }).done(function(){
         $('#overlay').fadeOut();
    });

you can add a .fail for when it fails, etc. see: http://api.jquery.com/jquery.ajax/

Answer 4

Just define the loader variable outside of your click event and then use it where needed. There will be less overhead if you only have to traverse the DOM once to locate the loader element. You can also change the on event to just a click event to save a few key strokes unless you need to delegate the event to another element. Also, you don't need to look up $(input#search) since ID's are unique. Removing the variable selector and just looking up the ID will be more efficient.

$(function() {
    var $loader = $('#overlay');
    $('.list').click(function(){
        $loader.fadeIn();
        $.ajax({
            type: "GET",
            url: "http://time.jsontest.com/",
            dataType: 'json',
            cache: false,
            success: function(json) {
                 $loader.fadeOut();
                $("#axajResponse").html('<b>Current Time:</b> ' + json.time).show();
            }
        });
        return false;    
    });
});

In the above example I'm getting back the current time so that you can see the response change on each click event.

Here is an example: http://jsfiddle.net/bradlilley/jLG4g/