Question

This bug is driving me absolutely crazy.

I’m trying to filter a number of complex table rows using jQuery 1.4.4.

The rows contain <input type="button" /> elements which are styled using jQuery UI 1.8.5.

This screenshot shows what the rows look like with no search filter applied.

These rows are dynamically added via an AJAX post call and are inserted after templating. This is the JS code for the post call.

$.post($.url('Asset/GetSites/'), { assetType: assetType, siteType: siteType }, function (data) {
    //hide the progress spinner
    $('.progSpinner').fadeOut();
    if (data.error) {
        ShowErrorBar();
        return;
    }
    $('#SiteRowTemplate').tmpl(data).appendTo(tbody);
    $('#assetTable input[type=button]').button();

    //tbody.hide().fadeIn();

    //trigger a sort
    $('#assetTable').trigger('update');
    $('#assetTable').trigger('sorton', [[[0, 0]]]);

    $('#pageLbl').text(assetTypeName + ' Assets: ' + siteTypeName);
});

I’m then using a basic text input to filter based on the site and the description columns. This is where the issue arises. This is the code for that:

var rows = $('#assetTable tbody tr.assets-site-row');
rows.each(function () {
    var row = $(this);
    var id = row.attr('id');

    if (row.attr('id').toLowerCase().indexOf(val) != -1 ||
    row.children('td').text().toLowerCase().indexOf(val) != -1) {
        //Search is a match
        row.show();
        $('#details' + id).show();
    }
    else {
        //Search is not a match
        row.hide();
        $('#details' + id).hide();
    }
});

In Chrome, IE8, Firefox, this works correctly. The rows that are not part of the search query are hidden correctly, but in IE7 things get broken.

You can see that the jQuery UI buttons are not correctly hidden from view, for the rows that are suppose to be hidden. If I open up the developer tools and toggle the inline diplay:none style off and on the particular ‘hidden’ row, then the row hides correctly.

I’m basically at my wits end with this one. Anyone have any suggestions?

Answer 1

I’ve had random issues like this happen in the past with dynamically added children. Basically I’ve had to call .children().hide(); and then call hide on the parent. The best I could find was that the children elements were correctly mapped in the DOM of IE.