Simple problem with onBlur and focus()
Hello everyone,
I'm having a simple/stupid problem with a check-in system I wrote. The computer has a barcode scanner hooked up to it that generates the code and a tab character. When the page on this computer loads, I do a focus() on our input box (only one on the page) and it's ready to scan. When a student scans in their ID, the barcode gets entered into the box and then the box gets tabbed out.
The input box has onBlur that fires my jQuery function register_number. This function launches some ajax that calls a php page, enters the number and time into the database and then spits back the student name, which gets placed into a div on the page (for verification by a teacher).
Finally, the input box is supposed to be cleared out and then the focus returned to it, so we can have continuous scanning.
The problems I'm seeing are as follows:
1) The focus is no longer returning to the box. At first, this was just a behavior in Safari, but now I'm seeing it in Firefox too ( we didn't test IE). I tried to add a setTimeout and it seemed to work, but then it stopped.
2) Most times the page refreshes after the second scan-in. Not sure why, but it defeats the purpose of the "live log" portion, since that gets cleared out.
Following is my code... it may be pretty rough, but I'm still pretty new. Thanks for any help!
- <fieldset id="signin_area">
<div align="center">
Please scan your ID with the provided scanner. You may also type an ID number in, and then hit "tab" to register the number.<br /><br />
<input type="text" name="id_number" id="id_number" onblur="register_number()" />
<input type="hidden" name="nothing" />
<div id="checked_in_log"></div>
</div>
</fieldset>
<script type="text/javascript">
$(function() {
$("#id_number").focus();
});
function register_number()
{
var student_id;
$student_id = $("#id_number").val();
$.ajax({
url: "includes/modules/library_check_in.php",
data: ({type: "register_number", id : $student_id}),
cache: false,
success: function(html) {
if(html.length > 0)
{
$("#checked_in_log").prepend(html);
}
//setTimeout(function(){$("#id_number").focus();},0);
//$("#id_number").attr("value", "");
//$("#id_number").focus();
}
});
$("#id_number").attr("value", "")
setTimeout(function(){$("id_number").focus();},0);
}
</script>