CODEWITHSUNDEEP
javascriptjqueryhtml
Dinesh
Dinesh

Reputation: 663

Jquery script not firing

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.

Upvotes: 2

Views: 200

Answers (3)

Neel
Neel

Reputation: 11721

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

Upvotes: 1

Hardy
Hardy

Reputation: 5631

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

Upvotes: 5

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

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

Upvotes: 0

Related Questions