jQuery won't fire

Question

I tried to implement this code on this page here and this is my fiddle JSFiddle and everything seems to work fine (the filtering) But when i try to implement it in my page, jQuery doesn't seem to work and i don't know why. Below is my code on my filter.php page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filter</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

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

</script>
</head>

<body>

<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>
</body>
</html>

Can anyone tell me what did i do wrong ?

You're missing your `$(document).ready()` line. – SenorAmor Dec 17 '14 at 01:34 — SenorAmor, Dec 17 '14 at 01:34
@SenorAmor Lol. okay. I forgot. Thanks – Athirah Hazira Dec 17 '14 at 01:37 — Athirah Hazira, Dec 17 '14 at 01:37

score 4 · Accepted Answer · answered Dec 17 '14 at 01:36

4

Wrap your code in $( document ).ready():

$(document).ready(function(){

[your code here]

});

answered Dec 17 '14 at 01:36

Francis Kim

4,235
4
36
51

score 2 · Answer 2 · answered Dec 17 '14 at 01:37

Try this

$( document ).ready(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();
});
});

score 1 · Answer 3 · answered Dec 17 '14 at 01:38

At the time you are calling your jQuery function the DOM isn't loaded yet, so jQuery won't find the requested elements. To avoid this, Simply wrap it in a

$(document).ready(function(){ /* code here */ }

To decrease loading time of your file, you might want to put the javascript at the end of your file, right before your closing </body> tag

score 1 · Answer 4 · answered Dec 17 '14 at 01:41

$(document).ready(function() {  //check it!

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<input type="text" id="search" placeholder="Type to search">
<table id="table">
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
</table>

jQuery won't fire

4 Answers4