<input> blur event is not firing on tablesorter “sortBegin” EVENT in firefox
Question
Using tablesorter I'm having an issue with the following in firefox.
The text box blur event will not always fire if I try sort emmediatly after adding text to the textbox.
Please see the code below. thanks for the help
// Jscript.js
$(document).ready(function () {
$.tablesorter.addParser({
id: 'coltwo',
is: function (s) {
return false;
},
format: function (s, table, cell) {
var temp = $('input', cell).val();
return temp.replace(",", "");
},
type: 'text'
});
$("#myTable").tablesorter({
headers: {
2: {
sorter: 'coltwo'
}
}
});
//http://mottie.github.com/tablesorter/docs/#Events
//update table and focus on table to try fire blur event
$("#myTable").bind("sortBegin", function () {
$(this).focus();
$('#myTable').trigger("update");
});
$(".txtInput").blur(function () {
var txt = $(this).val().replace("-",""); //remove this
$(this).val(txt + "z"); // add text to test if blur is working
});
});
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="js/JScript.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="tablesorter" border="1">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td><input type="text" value="aaaa" class="txtInput" /></td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td><input type="text" value="bbbb" class="txtInput" /></td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td><input type="text" value="cccc" class="txtInput" /></td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td><input type="text" value="dddd" class="txtInput" /></td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
3 answers
solution1
1 2012-10-12 02:36:50
If I remember correctly, the problem is that the click event on the header occurs before the blur event in Firefox and IE. So a better approach would be to detect the keyup event.
Also, instead of updating the entire table, use the updateCell method to just update the cell. You can read more about this method in my blog post about tablesorter's missing documentation .
Or better yet, try out the parser (code below) in this demo which only works on my forked version of tablesorter . The reason it won't work on the original version is because the format cell argument is out of order inside of the updateCell method.
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'inputs',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $c = $(cell);
// return 1 for true, 2 for false, so true sorts before false
if (!$c.hasClass('updateInput')) {
$c
.addClass('updateInput')
.bind('keyup', function() {
$(table).trigger('updateCell', [cell, false]); // false to prevent resort
});
}
return $c.find('input').val();
},
type: 'text'
});
solution2
0 ACCPTED 2012-10-12 16:33:27
How about this as a solution?
On the sortbegin event call back function then focus on a form element that is not in the table?
$("#myTable").bind("sortBegin", function (e, table, cell) {
$('#myotherinput').focus();
});
solution3
0 2013-02-27 12:16:58
This function is probably better/faster:
//bind to sort events
$("#yourtable").bind("sortStart",function() {
$(this).find('input:focus').trigger('blur');
});
By the way in TableSorter 2.0 (from Christian Bach) there is no "sortBegin". Instead " sortStart " & " sortEnd " is used.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.