JQuery UI Interface
I have a jQuery UI dialog box that hosts multiple buttons.
I would like to have keyboard control (tabs) on these buttons, so in the opened event handler for the dialog, I set the first button to focus.
I can see how it works and also check it with document.activeElement, but focus is then stolen and something else gets focused.
At this time, I don't know how I am supposed to see what has focus, since I have no additional hooks.
Has anyone else noticed a similar problem?
In case you're wondering, my code is this (as amended add Focus as described below)
in doc.ready - note I've also added jQuery buttons to it - but they don't seem to respond to keyboard events in ALL - but that's a separate issue.
$("#dialogSearchType").dialog
(
{
bgiframe: true,
height: 180,
width: 350,
modal: true,
autoOpen: false,
show: 'drop',
hide: 'fold',
buttons: { "Street": function() { HandleSearchStreetClick(); $(this).dialog("close"); },
"Property": function() { HandleSearchPropertyClick(); $(this).dialog("close"); }
},
focus: function(event, ui) { $("#btnSearchTypeProperty").focus(); }
}
);
<div id="dialogSearchType" class="searchDialog" style="width: 280px; display: none" title="Search For..." onkeyup="HandleSearchTypeDialogKeyUp(event)">
<span>What would you like to search for?</span>
<br />
<input type="button" tabindex="1" id="btnSearchTypeStreet" class="button" value="Street" onclick="HandleDialogSearchStreetClick()" />
<input type="button" tabindex="2" id="btnSearchTypeProperty" class="button" value="Property" />
</div>
As you can see, I tried to add event handlers along the way, but nothing happens!
a source to share
Try using a focus event handler instead of a public event handler and see if that helps. I think this is probably more correct, since if the dialog is not modal you probably want the button to receive focus by default every time the dialog is focused anyway, not just when it opens. If that doesn't work, I suggest you add some code to your question.
a source to share
Ok I can see what the problem is.
The dialog is set as modal.
jQuery will intercept document-level keyboard events and cancel them.
I think it sucks, so I'm trying to workaroundly destroy that event handler and add my own.
PS If anyone knows how to do this from the head, let me know!
a source to share