Issue
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 text box.
The idea for the page is to enter a part number to the text box (via a barcode scanner) and display the drawing which matches that part number, show up in the left div.
I have all of that working. No problems there.
What I can't figure out, is how to return the focus to the textbox after the drawing loads.
The drawing is being loaded as an object, like this:
<div id="viz">
<object classid="clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF" width="640" height="480">
<param name="src" value="name_of_file.dwf" />
<param name="wmode" value="transparent" />
<param name="UserInterfaceEnabled" value="false" />
<param name="NavigatorDocked" value="true" />
<param name="ToolbarVisible" value="false" />
<embed width="100%" height="100%" wmode="transparent" src="<?php echo $drawingfullpath;?>" ></embed>
</object>
</div>
(For anyone keeping score, that object is Autodesk DWF viewer. it acts a lot like flash, but doesn't accept all of the same parameters).
What is the best way to always keep focus in the text box? Because the operator will be using a barcode scanner, I'd rather not have them require a mouse to click back into the text box if focus is lost.
I would prefer to not use jquery, as it seems like overkill for such a simple request. HOWEVER, if jquery is the only way to accomplish this, then that's fine.
update
fiddle (http://jsfiddle.net/g9YxB/7/) has been updated with the latest suggestion from @subin.
The focus is still lost once the object loads. HOWEVER, if you click away from the page and then click back, the focus is where it belongs (in the text box). That has to be a clue, right?
Solution
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: '<p>This is your object successfully loaded here.</p>'
},
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/
Answered By - José SAYAGO
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.