Javascript does not seem to work. In JSFiddle it works

Question

I am using Javascript to search in a table of data. Now it's hardcoded.

Alright, so here is my js code:

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

    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();
});

It makes the text bar search in the table below. The table is here:

<input type="text" id="search" placeholder="Type to search">
<table id="table">
    <tr>
        <th>Naam</th>
        <th>Product -</th>
        <th>Locatie</th>
    </tr>
    <tr>
        <td>Henk</td>
        <td>Laptop</td>
        <td>Utrecht</td>
    </tr>
    <tr>
        <td>Klaas</td>
        <td>Beamer</td>
        <td>Gorinchem</td>
    </tr>
    <tr>
        <td>Sjaan</td>
        <td>Opnameapparatuur</td>
        <td>Gorinchem</td>
    </tr>
</table>

When I use the codes in JSfiddle it works, but as soon as I use it in html/php it doesn't.

My endresult is to have it work with a table created from sql data, but I need it to work with hardcoded data first to be sure.

EDIT: The JSfiddle can be found here

Yes @Tushar is right. Example: `$(document).ready(function(){ //insert that here });` — aldrin27, Sep 15 '15 at 09:47
Also, JavaScript is compiled, so you are able to see any error by checking the _F12_ developper console. Just let us know which error are thrown. — Anwar, Sep 15 '15 at 09:50
Here is the fixed jsfiddle using "head" instead of "onload": http://jsfiddle.net/mplungjan/6nm99ago/ — mplungjan, Sep 15 '15 at 10:01

score 2 · Accepted Answer · answered Sep 15 '15 at 09:50

2

As pointed you are trying to access the DOM before it has been loaded.

This fiddle is yours just upaded with jQuery ready function

http://jsfiddle.net/7BUmG/3393/

$(function(){
        var $rows = $('#table tr');
        $('#search').keyup(function () {

            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();
        });

});

answered Sep 15 '15 at 09:50

Saar

2,276
1
16
14

Thanks for the nice reply. I have pasted your JS code over mine, but it still doesn't seem to work. I can't paste my code here, but it doesn't work for me, whatever I do. – ThisIsNotArmand Sep 15 '15 at 09:57
It totally worked now, my server didn't push the data through to the site. – ThisIsNotArmand Sep 15 '15 at 10:15

Javascript does not seem to work. In JSFiddle it works

1 Answers1