Displaying a loading icon while jquery gets additional html into a page

Question

I'm using jquery to get a table of html search results via php based on a form variable and load it into a div. As the query can take a bit of time I'd like to displaying some form of loading anim but am not sure how to integrate it into my jquery.

Here's the code I have:

$(function() {
    $('#search_form').submit(function() {
        var data = $("#search_form :input").serializeArray();
        $('#results-panel').addClass('panel-primary');
        var model_id = data[0];
        $("#results").html('');
        $.get("/search/find_products/"+model_id.value, function (data) {
             $("#results").append(data);
        });
        return false;
    });
});

I'm still pretty new to jquery so this code is probably not the most efficient method. Any advice would be appreciated.

Kelly J Andrews · Accepted Answer · 2014-01-14 12:04:38Z

1

This is really straight forward using a .show() and .hide().

$(function() {
    $('#search_form').submit(function() {
        $('#myLoader').show();
        var data = $("#search_form :input").serializeArray();
        $('#results-panel').addClass('panel-primary');
        var model_id = data[0];
        $("#results").html('');
        $.get("/search/find_products/"+model_id.value, function (data) {
             $("#results").append(data);
             $('#myLoader').hide();
        });
        return false;
    });
});

answered Jan 14, 2014 at 12:04

Kelly J Andrews

5,1211 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucas Veiga · Accepted Answer · 2014-01-14 12:09:23Z

1

You can use fadeIn and fadeOut callbacks.

$(function() {
    $('#search_form').submit(function() {
        $("#loader").fadeIn(500, function() {
           var data = $("#search_form :input").serializeArray();
           $('#results-panel').addClass('panel-primary');
           var model_id = data[0];
           $("#results").html('');
           $.get("/search/find_products/"+model_id.value, function (data) {
                $("#loader").fadeOut(500, function() {
                    $("#results").append(data);
                });
           });
           return false;
    });
});

answered Jan 14, 2014 at 12:09

Lucas Veiga

1,7937 gold badges27 silver badges48 bronze badges

Collectives™ on Stack Overflow

Displaying a loading icon while jquery gets additional html into a page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related