CODEWITHSUNDEEP
jqueryhtml
john king
john king

Reputation: 27

two jquery filters canceling each other

i created two filters using to show/hide table rows according to selected values from two different dropdowns. the columns im activating the filter on are user_name and script_name. the way filters works its that they first show all rows and than hide all except for selected value but when i want to use both filters each one cancels the other. this are my two filters:

$(document).ready(function(){
    $('#userSelected').change(function() {
        $('tr').show();
        if ($(this).val() == "All") {
        }
        $('tr').filter(function () {
            return $(this).find('td.userName').filter(function () {
                return $(this).text().indexOf($('#userSelected').val()) == -1;
            }).length;
        }).hide();
    });
});

$(document).ready(function(){
    $('#scriptSelected').change(function() {
        $('tr').show();
        if ($(this).val() == "All") {
        }
        $('tr').filter(function () {
            return $(this).find('td.scriptName').filter(function () {
                return $(this).text().indexOf($('#scriptSelected').val()) == -1;
            }).length;
        }).hide();
    });
});

and my table:

<table class="table table-bordered table-hover" ng-controller="tableCtrl">
    <thead>
    <th>user name</th>
    <th>script name</th>
    <th>cron format<span class="glyphicon glyphicon-question-sign"></span></th>
</thead>
<tbody ng-repeat="(user_id,script_id) in data">
    <tr ng-repeat="(script_id, cron_format) in script_id">
        <td class="userName">{{user(user_id)}}</td>
        <td class="scriptName">{{script(script_id)}}</td>
        <td class="cronFormat"><span contenteditable="true" ng-repeat="l in letters(cron_format) track by $index">{{l}}</span></td>
    </tr>
</tbody>

assuming there is one row person with the user_name "David" and the script_name "script one" ...how can i show only this row without the filters canceling each other?

try display only David with script one row in http://jsfiddle.net/al_sade/rffbprut/ and you will understand my intention

Upvotes: 0

Views: 51

Answers (2)

Ja͢ck
Ja͢ck

Reputation: 173552

Just create a single filter function and call it whenever one of the dropdown values change:

function update()
{
    var selectedScript = $('#scriptSelected').val(),
    selectedUser = $('#userSelected').val();

    $('tr')
      .show();
      .filter(function () {
        var matchedUserName = selectedUser == 'All' || $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf(selectedUser) != -1;
        }).length;

        var matchedScriptName = selectedScript == 'All' || $(this).find('td.scriptName').filter(function () {
                return $(this).text().indexOf(selectedScript) != -1;
            }).length;

        return !matchedUserName || !$matchedScriptName;
    }).hide();
}

jQuery(function($) {
    $('#userSelected,#scriptSelected').change(update);
});

Upvotes: 0

Nitu Bansal
Nitu Bansal

Reputation: 3856

try below code

   $(document).ready(function(){
$('#userSelected').change(function() {
    $('tr').show();        
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.scriptName').filter(function () {
            return $(this).text().indexOf($('#scriptSelected').val()) == -1;
        }).length;
    }).hide();
    }
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf($('#userSelected').val()) == -1;
        }).length;
    }).hide();
    }

});
});

 $(document).ready(function(){
$('#scriptSelected').change(function() {
    $('tr').show();        
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.scriptName').filter(function () {
            return $(this).text().indexOf($('#scriptSelected').val()) == -1;
        }).length;
    }).hide();
    }
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf($('#userSelected').val()) == -1;
        }).length;
    }).hide();
    }

});
});

working fiddle here https://jsfiddle.net/rffbprut/1/

Upvotes: 1

Related Questions