Question

I have web page with some really large tables that I’m filtering using some jquery routines I wrote. Anyway, when these tables get really large and the filtering functions can take some time to complete. So I figured I’d unhide a animated gif so the user had some feedback. However, the gif never appears when I call:

$('#loadingimg').show(); 

Unless I put an alert statement in front of it. I apologize for the ugly code, I’m not an experienced jquery/javascript programmer.

function filter()
{
    var eles = ["mtmprogram","rate","stage"];
    var tag;
    var classes='';

    $('#loadingimg').show();
//alert('hi');
    $('.report').hide();

    for (var i in eles)
    {
        tag = '#' + eles[i] + ' option:selected';
        if ($(tag).val())
        {
            //$('.'+ $(tag).val()).show();
            classes = classes + '.' + $(tag).val();
        }
    }
    if (classes == '')
        $('tr.report').show();
    else
        $(classes).show();

    filterSubtables('Loan Number');
    $('#loadingimg').hide();

}

Many thanks!

Answer 1

Maybe you aren’t giving the #loadingimg element enough time to display. You could test this by running the rest of your code in a timeout:

function filter()
{
    var eles    = ["mtmprogram","rate","stage"],
        classes = '';

    $('#loadingimg').show();
//alert('hi');
    setTimeout(function () {
        $('.report').hide();

        for (var i = 0, len = eles.length; i < len; i++)
        {
            var $tag = $('#' + eles[i] + ' option:selected');
            if ($tag.val())
            {
                //$('.'+ $tag.val()).show();
                classes = classes + '.' + $tag.val();
            }
        }
        if (classes == '')
            $('.report').show();
        else
            $(classes).show();

        filterSubtables('Loan Number');
        $('#loadingimg').hide();
    }, 500);

}

Notice that I changed how the tag variable is used (this creates less CPU overhead to make less jQuery selections and to use as local a variable as possible). I also changed your loop to a better format that performs amazingly faster than for ( a in b ): http://jsperf.com/jquery-each-vs-for-loops/2