CODEWITHSUNDEEP
javascriptjqueryhtmlimagefilter
randomizertech
randomizertech

Reputation: 2329

Make image hide correctly after filtering using jquery

I am using the following code to filter data in a table and to display image with id loader while doing this.

My problem is that it does not hide and I don't know what I'm doing wrong.

I tried adding an alert before the hiding and it does show the alert but it's not working properly when it comes to display the image. What am I doing wrong? inputFilter is the name of the input for the filter and data_fm_op is the name of the table.

JavaScript

$('#inputFilter').change(function () {
$('#loader').show();
var that = this;
$('tbody tr').each(function () {
    if ($(this).text().indexOf($(that).val()) == -1) {
        $('#data_fm_op').animate({
            marginTop: 0
        }, 50, function () {
            $(this).find('tbody tr').eq(i).hide();
        });
    } else {
        $('#data_fm_op').animate({
            marginTop: 0
        }, 50, function () {
            $(this).find('tbody tr').eq(i).show();
        });
    }
});
$('#loader').hide();

});

Here is the jsFiddle: http://jsfiddle.net/m6hLR/

Upvotes: 1

Views: 522

Answers (3)

Abraham Uribe
Abraham Uribe

Reputation: 3118

you can wait on the animate callback and if the current index is equal to the length of tr then hide the loader 

$('#loader').hide();   
$('#inputFilter').change(function() {
    $('#loader').show();
    var that = this;
    var length=$('tbody tr').length;
    $('tbody tr').each(function(i,n) {
        if ($(this).text().indexOf($(that).val()) == -1) {
            $('#data_fm_op').animate({
                marginTop: 0
            }, 50, function() {
                $(this).hide();
                if(i==length-1){//if it is the last element hide the loader
                     $('#loader').hide();           
                }  
            });
        } else {
            $('#data_fm_op').animate({
                marginTop: 0
            }, 50, function() {
                $(this).show();
                if(i==length-1){//if it is the last element hide the loader
                     $('#loader').hide();           
            }  
       });
      }           
    });
});

http://jsfiddle.net/m6hLR/10/

Upvotes: 1

Subin
Subin

Reputation: 3563

You have not added an id attribute on image tag. Change :

<img src="https://www.vocalware.com/images/ajax_loader.gif" height="19" width="19">

to :

<img src="https://www.vocalware.com/images/ajax_loader.gif" id="loader" height="19" width="19">

JsFiddle : http://jsfiddle.net/subins2000/m6hLR/7/

Upvotes: 0

gmaliar
gmaliar

Reputation: 5479

It's pretty hard without a jsfiddle with some HTML to understand the structure of your code but try this instead.

http://jsfiddle.net/MRa8q/3/

$('#inputFilter').change(function() {
        $('#loader').show();
        var that = this;
        $('tbody tr').each(function() {
            if ($(this).text().indexOf($(that).val()) == -1) {
                $('#data_fm_op').animate({
                    marginTop: 0
                }, 50, function() {
                    $(this).hide();
                });
            } else {
                $('#data_fm_op').animate({
                    marginTop: 0
                }, 50, function() {
                    $(this).show();
                });
            }
        });
    $('#loader').hide();
});

Upvotes: 0

Related Questions