How to hide a div after complete the ajax call,my code is given below ..in this code div hide before the refresh

Question

How to hide a div after complete the ajax call,my code is given below... in this code div hide before the refresh

$(document).ready(function() {
    $('#search-button').click(function() {
        $('#imgLoader').show();
        var request = $.ajax({
            type: "GET",
            url: 'response.php',
            data: $('#search-form').serialize(),
            success: function(response) {
                var url = 'detail_page.php';
                $('#my_cart').load(url + ' #mycart');
                $('#refcart').load(url + ' #shoppingCart');
                $('#imgLoader').hide();
            }
        })
    });
});

image loader hide before complete the refresh of two divs. Please help me

Answer 1

Take a look at http://api.jquery.com/load/

You can add a callback to the .load methods that will trigger once the element is fully loaded.

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

In your case, something like that:

 $('#my_cart').load(url + ' #mycart', function () {
   $('#imgLoader').hide();
 );

Answer 2

A possible solution could be by using the complete parameter of load:

success: function(response) {
    var url = 'detail_page.php';
    $('#my_cart').load(url + ' #mycart', function() {
        $('#refcart').load(url + ' #shoppingCart', function() {
            $('#imgLoader').hide();
         });
    });
}

Keep in mind, thats not the best solution, because the second load will be executed not until the completion of the first.

Edit: I would suggest you to work with tokens :

success: function(response) {
    var myCartLoaded = false;
    var refCartLoaded = false;
    var url = 'detail_page.php';
    $('#my_cart').load(url + ' #mycart', function() {
        myCartLoaded = true;
        if(refCartLoaded) { 
            $('#imgLoader').hide();
            myCartLoaded = false;
            refCartLoaded = false;
        } 
    });
    $('#refcart').load(url + ' #shoppingCart', function() {
        refCartLoaded = true;
        if(myCartLoaded) { 
            $('#imgLoader').hide();
            myCartLoaded = false;
            refCartLoaded = false;
        } 
    });
}

This way both load-functions will start at the same time and the one which stops last will trigger to hide your imageLoader.

Answer 3

You have more than one error in your code :

• You make an ajax request to get search result, but you don't use the response inside the success function. $().load is async, that
• means you should wait the end of each $().load request before hiding #imgLoader

The $().load is working like this

.load( url [, data ] [, complete ] )

And you should use promises to make it work.

$(document).ready(function() {
    $('#search-button').click(function() {
        $('#imgLoader').show();
        // create the deffered instances
        var myCartDeferred = $.Deferred();
        var refCartDeffered = $.Deferred();

        // $.ajax also return a deffered
        var request = $.ajax({
            type: "GET",
            url: 'response.php',
            data: $('#search-form').serialize(),
            success: function(response) {
                var url = 'detail_page.php';

                $('#imgLoader').hide();
            }
        })

        // Setup the chain of events
        $.when(myCartDeferred, refCartDefferd, request).then(function() {
            alert('done');
        });

        // start the load actions at the same time than the $.ajax and pass the deferred.resolve as complete param
        $('#my_cart').load(url + ' #mycart', myCartDeferred.resolve);
        $('#refcart').load(url + ' #shoppingCart', refCartDeffered.resolve);
    });
});

Answer 4

jQuery .load returns jquery object making it inconvenient to wait for multiple loads to happen. You could add custom promiseToLoad method that returns a promise.

NB! Haven't tested this code.

$.fn.promiseToLoad = function(url, data) {
    var dfd = $.Deferred(),
        jquery = this;
    jquery.load(url, data, function() {
        if(dfd.state() === 'pending') {
            dfd.resolveWith(jquery, jquery);
        }
    });
    return dfd.promise();
}

and then

var myCart = $('#my_cart').promiseToLoad(url + ' #mycart'),
    refCart = $('#refcart').promiseToLoad(url + ' #shoppingCart');

$.when(myCart, refCart).then(function() {
    $('#imgLoader').hide();
});