Table filter not working

Question

I've been stuck on this for the last day and a half. I am trying get a real time filter added for my html table (which is generated off a PHP script to import a .csv file to html standard markup). I based my code off the following demo http://jsfiddle.net/7BUmG/2/ that I found from How to perform a real time search and filter on a HTML table .

Now I think the issue is that the elements are not defined at time of DOM. I've tried adding the following to accommodate for this but with no luck.

<script>
$(document).ready(function() {   
// My javascript  
});
</script>

and

<script>
$(document).on('pageinit')  {  
// My javascript  
});
</script>

and also just a plain function tag

<script>
$(function(){  
// My javascript  
});
</script>

Does anyone know how to get this js code to perform upon keystroke in my html page? (it works in the link provided above but not outside jsfiddle)

$('#search').keyup(function() {
    var $rows = $('#table1 tr');
    var val = '^(?=.*\\b' + $.trim($('#search').val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

Ps. This is my first post so let me know if I did something wrong or need more explanation given. Thanks!

I have that appearing right before the table. It looks like this — LearnerMike, Dec 13 '13 at 18:21
And the `var $rows = $('#table1 tr');` is inside the keyup like in the code above? Fiddle it is outside. — epascarello, Dec 13 '13 at 18:30
And your table id is table1? You need to debug what is going on. console.log and debugger; is your friend. — epascarello, Dec 13 '13 at 18:54
It is table1. I looked at the debugger and it is giving me a TypeError on this line and saying it is not a function - "$(document).ready(function() { " — LearnerMike, Dec 13 '13 at 19:14
Perfect that was my issue! I'm a relative newcomer to website coding and didn't realize that jQuery needs to be loaded to the page. Thanks for the help! — LearnerMike, Dec 13 '13 at 20:10

score 0 · Answer 1 · answered Dec 13 '13 at 18:11

0

Are you sure you're binding JS events after your DOM tree is built?

E.g. wrap your code as ready event listener of the document

$(document).ready(function(){

    $('#search').keyup(function() {
        //...
    }

})

answered Dec 13 '13 at 18:11

Te Ko

768
3
13

Yes this is what I currently have. $(document).ready(function() { //$(function(){ $('#search').keyup(function() { var $rows = $('#table1 tr'); var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', reg = RegExp(val, 'i'), text; $rows.show().filter(function() { text = $(this).text().replace(/\s+/g, ' '); return !reg.test(text); }).hide(); }); }); – LearnerMike Dec 13 '13 at 18:33

Table filter not working

1 Answers1