I am trying to show a table which is an ajax output (PHP). Even though I have added all necessary attributes to the table, tablesorter is not triggered. May I know where I went wrong. Any suggestions would be highly appreciated.
HTML output via ajax
<table border=1 width="850" id="search" class="tablesorter">
<thead>
<tr>
<!--<th><input type="checkbox" id="selectall"/></th>-->
<th>SNo.</th> <th>UserName</th> <th>Product Name</th><th>Price </th><th>Quantity</th><th>Total price</th><th>Quarter</th>
</tr>
</thead>
<tbody>
<tr width=700> <td>1</td> <td>user</td> <td>androidGUI</td> <td>101</td> <td>10</td> <td>1010</td> <td>Q4-13</td></tr>
<tr width=700> <td>2</td> <td>user </td> <td>androidGUI</td> <td>101</td> <td>10</td> <td>1010</td> <td>Q4-13</td></tr>
<tr width=700> <td>3</td> <td>user</td> <td>cat6k22</td> <td>789</td> <td>5</td> <td>3945</td> <td>Q4-13</td></tr>
<tr width=700> <td>4</td> <td>user</td> <td>HP21</td> <td>252</td> <td>25</td> <td>6300</td> <td>Q4-13</td></tr>
<tr width=700> <td>5</td> <td>user</td> <td>nexus</td> <td>101</td> <td>15</td> <td>1515</td> <td>Q4-13</td></tr>
</tbody>
</table>
My Javascript:
<script type="text/javascript">
$(function(){
$("select").multiselect({
selectedList: 4,
header: false
});
});
$( document ).ready(function() {
$(function () {
var frm = $('#searchreq');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
//alert(data);
document.getElementById("resultshower").innerHTML= data;
}
});
ev.preventDefault();
});
});
});
$("#resultshower").ready(function() /*Also tried with $(document).ready still no use*/
{
$("#search").tablesorter();
}
);
</script>
The same script works without ajax calls. Please see me as novice to jQuery
You had jumbled your brackets and braces.Try this:
$("#resultshower").ready(function() /*Also tried with $(document).ready still no use*/
{
$("#search").tablesorter();
}); //You went wrong here
And also you are calling .ready()
function twice before ajax. Check here:
$(document).ready(function() {
$(function () { //remove this line
.....
.....
}); // remove this line
});