Jquery question : maintain focus upon appending a row?
- by PoppySeedsAndAppleJuice
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();
}
});
});
