How to I set focus
How to I set focus
Here is some explanation:
1. When I click a button in the menu a JQuery-UI dialog named dlgNewVoyage is displayed.
The markup for this dlgNewVoyage is listed below.
2. When I press key F4 in any of the fields(prevPortID,portID ornextPortID) in this dlgNewVoyage dialog a new JQuery-UI dialog named dlgSearchOrt is displayed.
The markup for this dlgSearchOrt is also listed below.
3 This JQuery-UI dialog named dlgSearchOrt has an input element of type=text with id= ortDescription
4. Now this JQuery-UI dialog named dlgSearchOrt is displayed but focus is now at the url address in the webb browser. I want the Focus to be in the field ortDescription.
5. Here is what I have tried. I set focus to ortDescription and in addition I use a small time out so
the JQuery-UI dialog dlgSearchOrt is fully displayed.
function Keydown_PrevPortIDNewVoyageDialog(e)
{
if (e.keyCode == 115) //F4
{
$("#dlgSearchOrt").dialog({
width: 700
});
GetOrt("Karlstad");
setTimeout(function () { $("#ortDescription").focus(); }, 1000);
}
}
6.Inspite using this focus to the field ortDescription the focus is still on the url address of the browser.
How can I change focus to be on the ortDescription instead ?
//Markup for JQuery-UI dialog dlgNewVoyage
//************************************************
<div id="dlgNewVoyage" title="New Voyage" style="width:900px; display:none">
<br />
<table>
<tr>
<th> VesselID: </th>
<th></th>
<th> Arrival date </th>
<th> Departure date </th>
</tr>
<tr>
<td> <input type="Text" id="vesselID" size="6" /> </td>
<td> <input type="Text" id="vesselID_desc" size="30" disabled="disabled" /></td>
<td>
<input type="Text" id="arrID" size="18"/>
<img src="images/cal.gif" alt="" onclick="javascript:NewCssCal('arrID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
<td>
<input type="Text" id="depID" size="18"/>
<img src="images/cal.gif" alt="" onclick="javascript:NewCssCal('depID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
</tr>
</table>
<table>
<tr>
<th>PrevPort:</th>
<th></th>
</tr>
<tr>
<td> <input class="Uppercase" type="Text" id="prevPortID" size="6" /></td>
<td> <input type="Text" id="prevPortID_desc" size="30" disabled="disabled" /></td>
</tr>
</table>
<table>
<tr>
<th>Port:  </th>
<th></th>
</tr>
<tr>
<td> <input class="Uppercase" type="Text" id="portID" size="6" /></td>
<td> <input type="Text" id="portID_desc" size="30" disabled="disabled" /></td>
</tr>
</table>
<table>
<tr>
<th>NextPort:</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td> <input class="Uppercase" type="Text" id="nextPortID" size="6" /></td>
<td> <input type="Text" id="nextPortID_desc" size="30" disabled="disabled" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td> <input id="btnSaveNewVoyage" type="button" value="Save" /></td>
<td> <input id="btnDeleteVoyage" type="button" value="Delete" /></td>
</tr>
</table>
</div>
//Tony