The function below checks whether
the id entered is already in
the database, and if it is, then it adds some html to
the table. I'm not sure if it's directly related to my issue or not, but, essentially, a user will place
the focus on
the id input field and enters an id. Using ajax, it posts to a php script and returns data if rows are found and nothing if it doesn't. If
the user then tabs over to
the next input field (zipcode), or clicks in another input field, they essentially have to do so twice.
The cursor "flashes" in
the field briefly and then focuses out. I tried adding in a focus(), but
the behavior didn't change.
So,
the html looks like this:
<table id="tableSearchData" class="searchlist" style="width: 789px;">
<thead>
<tr>
<th>ID</th>
<th>Zip Code</th>
<th>Radius (in miles)</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<!--
PROBLEM is described below -->
<!-- User clicks in <input name="id[]"> and ID is checked -->
<!-- User presses "tab" or clicks in <input name="zipcode[]
(in
the *same* row) and cursor flashes, then goes out
of focus so that
the user has to click in
the field again -->
<td class="center sorting_1"><input type="text" value="" name="id[]"></td>
<td class="center"><input type="text" value="" name="zipcode[]"></td>
<td class="center"><input type="text" value="" name="radius[]"></td>
</tr>
</tbody>
</table>
Here's
the jquery function... Like I said, I'm not sure if it's directly related to
the problem I'm having, but, thought I should include it because I suppose it's likely there is something happening there...
$("#tableSearchData > tbody > tr > td > input[name=id[]]").focusout(function() {
var row = $(this).closest("tr").get(0);
var sData = $(this).serialize();
$.ajax({
type: "POST",
url: "checkid.php",
data: sData,
success: function(html) {
$(row).replaceWith(html);
$(".preset").each(function() {
$(this).attr("disabled", true);
});
$(row).closest("input[name=zipcode[]]").focus();
}
});
});
