Jquery script not firing

Question

I am new to jquery usage. I have reproducing a working example from internet for filtering table row using jquery. The table contains 2 columns and corresponding values in it.But When I run the program using jquery to filter the row after following the instructions, I am unable to filter the rows with my query. I have no clue where my mistake is and dont know if jquery actually fires. Here is code which I included in head section of JSP page

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script><script type= "text/javascript">
$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
    });
});

Here is the code which I included in body section of JSP page which consists of table with entries

<body> <input id="searchInput" placeholder="Type To Filter"><br/><table>
<thead>
<tr><th>Column1</th>
<th>Column2</th></tr>
</thead>
<tbody id="fbody">
<tr><td>cat</td><td>one</td></tr>
<tr><td>dog</td><td>two</td></tr>
<tr><td>cat</td><td>three</td></tr>
<tr><td>moose</td><td>four</td>
</tr><tr><td>mouse</td><td>five</td>
</tr><tr><td>dog</td><td>six</td>
</tr></tbody>
</table>
</body>

Kindly guide me.

Hardy · Accepted Answer · 2014-04-27 11:02:14Z

5

Add your JQuery code inside ready block:

$(document).ready(function() {

  // your code

});

You can't refer to elements (like $('#mydiv')) before document is fully loaded.

And change your code like:

$(document).ready(function() {
  $("#searchInput").keyup(function() {
      var rows = $("#fbody").find("tr");
      $.each(rows, function() {
       $(this).hide();
      });
      var data = $(this).val().split(" ");
      $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
      });
  });
});

edited Apr 27, 2014 at 11:02

answered Apr 27, 2014 at 10:55

Hardy

5,6412 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neel · Accepted Answer · 2014-04-28 05:42:20Z

1

document.ready is required as shown beloe

 $(document).ready(function() {

  // code

});

so in ur case code would be like as below

$(document).ready(function() {
  $("#searchInput").keyup(function() {
      var rows = $("#fbody").find("tr");
      $.each(rows, function() {
       $(this).hide();
      });
      var data = $(this).val().split(" ");
      $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
      });
  });
});

edited Apr 28, 2014 at 5:42

answered Apr 27, 2014 at 10:56

Neel

11.7k3 gold badges46 silver badges63 bronze badges

Comments

Ehsan Sajjad · Accepted Answer · 2014-04-27 11:00:57Z

0

you script tag is not right also wrap it in document.ready:

<script type= "text/javascript"> 
$(document).ready(function(){

$("#searchInput").keyup(function() {

var rows = $("#fbody").find("tr").hide(); 
var data = this.value.split(" "); 
$.each(data, function(i, v) { 
rows.filter(":contains('" + v + "')").show(); 

     }); 
 });


});
</script>

and on latest jquery on is preffered:

$("#searchInput").on('keyup',function() { 
var rows = $("#fbody").find("tr").hide(); 
var data = this.value.split(" "); 
$.each(data, function(i, v) { 
rows.filter(":contains('" + v + "')").show(); 
});
});

edited Apr 27, 2014 at 11:00

answered Apr 27, 2014 at 10:55

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

3 Comments

Hardy Over a year ago

The $("#fbody").find("tr").hide() wont return wanted items because of the function hide() at the end..

Ehsan Sajjad Over a year ago

hide only set css property to hide element nothing else

Dinesh Over a year ago

@EhsanSajjad Thanks for your help. Now it works when I included read.function().Now I want to include the same script for my real web application which includes a button that will fetch all records from MySQl table and displays in table embedded simple HTML file. Now I want the same script to filter the result table. But its not working.

Collectives™ on Stack Overflow

Jquery script not firing

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related