I have created a single HTML page that contains two divs. The div on the left (90% of page) is the target for ajax results. The div on the right (10% of page) contains a single
Using jQuery would look something like this:
$(function() {
// Focus on load
$('.scanner').focus();
// Force focus
$('.scanner').focusout(function(){
$('.scanner').focus();
});
// Ajax Stuff
$('.scanner').change(function() {
$.ajax({
async: true,
cache: false,
type: 'post',
url: '/echo/html/',
data: {
html: 'This is your object successfully loaded here.
'
},
dataType: 'html',
beforeSend: function() {
window.alert('Scanning code');
},
success: function(data) {
window.alert('Success');
$('.objectWrapper').append(data);
},
// Focus
complete: function() {
$('.scanner').val('').focus();
}
});
});
});
jsFiddle example: http://jsfiddle.net/laelitenetwork/fuMYX/5/
P.S: jQuery haters gonna hate ;).