Apex Code Development You need to sign in to do that
Don't have an account?
BobB Pressing Enter, Tabindex, Button Order, where is the cursor?
I would think this would be a simple thing but I can't find it. The closest is JavaScript and I would like to keep it very simple indeed.
I have a section of a page that is for input. Code below.There are a few things that don't work like I would expect:
- When the page comes up the cursor is on Contributor Last Name, tabindex=1 not Contributor First Name, tabindex=0 as I would expect.
- If I enter something in a field, any field, and then press enter what runs is the second button, Export Page, not the first, Run Search, as I would expect.
- I would like to explicitly place the cursor on a field or button regardless of tabindex. Is there a way to do that?
Are my expectations wrong? What am I missing here? Does all of this have to be done in JS?
Thanks... Bob
<table width="100%" border="0">
<tr>
<td width="200" valign="top">
<apex:pageBlock title="Search Criteria" mode="edit" id="criteria">
<table cellpadding="2" cellspacing="2">
<tr> <td style="font-weight:bold;">Contributor First Name<br/> <apex:inputText id="contributorFname" tabindex="0" value="{!contributorFname}"/> </td></tr>
<tr> <td style="font-weight:bold;">Contributor Last Name<br/> <apex:inputText id="contributorLname" tabindex="1" value="{!contributorLname}"/> </td></tr>
<tr> <td style="font-weight:bold;">Contributor State<br/> <apex:inputText id="contributorState" tabindex="2" value="{!contributorState}"/> </td></tr>
<tr> <td style="font-weight:bold;">MOC First Name<br/> <apex:inputText id="MOC_Fname" tabindex="3" value="{!MOC_Fname}"/> </td></tr>
<tr> <td style="font-weight:bold;">MOC Last Name<br/> <apex:inputText id="MOC_Lname" tabindex="4" value="{!MOC_Lname}"/> </td></tr>
<tr> <td style="font-weight: bold;">Record Limit<br/>
<apex:selectlist tabindex="5" value="{!soqlLimitPage}" multiselect="false" size="1">
<apex:selectOption itemValue="limit 20" itemLabel="20 Records"/>
<apex:selectOption itemValue="limit 40" itemLabel="40 Records"/>
<apex:selectOption itemValue="limit 80" itemLabel="80 Records"/>
</apex:selectlist>
</td></tr>
<tr>
<td style="font-weight: bold;"><br/>
<apex:commandButton action="{!runSearch}" tabindex="6" value="Run Search" rerender="results,debug" id="theSearch"/>
</td>
</tr>
<tr>
<td style="font-weight: bold;"><br/>
<apex:commandButton action="{!$Site.CurrentSiteUrl}/apex/ContributionsToCSV_v1" tabindex="7" value="Export Page" id="theExportPage" />
</td>
</tr>
</table>
When the page comes up the cursor is on Contributor Last Name, tabindex=1 not Contributor First Name, tabindex=0 as I would expect.
Part 1 of the mystery solved: Tabindex=1 gets the focus, not 0. The JavaScript made no difference.
All Answers
1. If you refresh the page, the cursor stays at where it was previously located before reloading. Could this be the issue? I.e. when you come from a different page, does this problem still occur? Also, I think tabindex just arranges the order, but i'm not sure if it automatically focuses to the first tabindex.
2. I am not sure of this. I would also Run Search to execute. Try to interchange the two and see which one is executed.
3. You can use javascript here: document.getElementById("commandFname").focus();
Thanks, kerwintang. Pls see below....
1. If you refresh the page, the cursor stays at where it was previously located before reloading. Could this be the issue?
Refresh either by F5 or reentering the URL produces same results. Cursor at the second input box.
I.e. when you come from a different page, does this problem still occur?
Yes.
Also, I think tabindex just arranges the order, but i'm not sure if it automatically focuses to the first tabindex.
2. I am not sure of this. I would also Run Search to execute. Try to interchange the two and see which one is executed.
Clicking the buttons works fine. Exporting works fine. I tried swapping the order of the buttons and got the same results.
3. You can use javascript here: document.getElementById("commandFname").focus();
Thanks. I'll try this. Will solve part of the problem anyway.
...Bob
When the page comes up the cursor is on Contributor Last Name, tabindex=1 not Contributor First Name, tabindex=0 as I would expect.
Part 1 of the mystery solved: Tabindex=1 gets the focus, not 0. The JavaScript made no difference.
But wait... There's more... If I remove the export button altogether, enter something in the first box, then press enter nothing happens. No action at all.
So, I guess what I need to know is: No matter where I am on the page, if I press enter how can I ensure that the action is Run Search?
No doubt very simple but I don't know what it is.
Thanks.... Bob
Are you wrapping your table and fields inside a <form> tag? If so, can you view the source of the generated page.. and post the HTML generated by the Run Search button. :)
This is as it comes up the first time. After clicking Run Search follows:
<h2 class="mainTitle">Contributions Search v14</h2></td><td> </td></tr></tbody></table></div><div class="pbBody"> <table width="100%" border="0"> <tbody><tr> <td valign="top" width="200"><div class="apexp"><div class="editPage"><div id="j_id0:j_id1:j_id28:criteria" class="bPageBlock brndScnBrd bEditBlock secondaryPalette"><div class="pbHeader"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="pbTitle"><h2 class="mainTitle">Search Criteria</h2></td><td> </td></tr></tbody></table></div><div class="pbBody"> <table cellpadding="2" cellspacing="2"> <tbody><tr> <td style="font-weight: bold;"><br><input class="btn" id="j_id0:j_id1:j_id28:criteria:theSearch0" name="j_id0:j_id1:j_id28:criteria:theSearch0" onclick="A4J.AJAX.Submit('j_id0:j_id1',event,{'similarityGroupingId':'j_id0:j_id1:j_id28:criteria:theSearch0','parameters':{'j_id0:j_id1:j_id28:criteria:theSearch0':'j_id0:j_id1:j_id28:criteria:theSearch0'} } );return false;" value="Run Search" tabindex="0" type="button"> </td> </tr> <tr> <td style="font-weight:bold;">Contributor First Name<br><input id="j_id0:j_id1:j_id28:criteria:contributorFname" name="j_id0:j_id1:j_id28:criteria:contributorFname" tabindex="1" type="text"> </td></tr> <tr> <td style="font-weight:bold;">Contributor Last Name<br><input id="j_id0:j_id1:j_id28:criteria:contributorLname" name="j_id0:j_id1:j_id28:criteria:contributorLname" tabindex="2" type="text"> </td></tr> <tr> <td style="font-weight:bold;">Contributor VFP only<br><input id="j_id0:j_id1:j_id28:criteria:contributorVFP" name="j_id0:j_id1:j_id28:criteria:contributorVFP" tabindex="3" type="checkbox"> </td></tr> <tr> <td style="font-weight:bold;">Contributor State<br><input id="j_id0:j_id1:j_id28:criteria:contributorState" name="j_id0:j_id1:j_id28:criteria:contributorState" tabindex="4" type="text"> </td></tr> <tr> <td style="font-weight:bold;">MOC First Name<br><input id="j_id0:j_id1:j_id28:criteria:MOC_Fname" name="j_id0:j_id1:j_id28:criteria:MOC_Fname" tabindex="5" type="text"> </td></tr> <tr> <td style="font-weight:bold;">MOC Last Name<br><input id="j_id0:j_id1:j_id28:criteria:MOC_Lname" name="j_id0:j_id1:j_id28:criteria:MOC_Lname" tabindex="6" type="text"> </td></tr> <tr> <td style="font-weight: bold;">Record Limit<br><select name="j_id0:j_id1:j_id28:criteria:j_id38" size="1" tabindex="5"> <option value="limit 20" selected="selected">20 Records</option> <option value="limit 100">100 Records</option> <option value="limit 200">200 Records</option> </select> </td></tr> <tr> <td style="font-weight: bold;"><br><input class="btn" id="j_id0:j_id1:j_id28:criteria:theSearch" name="j_id0:j_id1:j_id28:criteria:theSearch" onclick="A4J.AJAX.Submit('j_id0:j_id1',event,{'similarityGroupingId':'j_id0:j_id1:j_id28:criteria:theSearch','parameters':{'j_id0:j_id1:j_id28:criteria:theSearch':'j_id0:j_id1:j_id28:criteria:theSearch'} } );return false;" value="Run Search" accesskey="9" tabindex="7" type="button"> </td> </tr> <tr> <td style="font-weight: bold;"><br><input id="j_id0:j_id1:j_id28:criteria:theExportPage" name="j_id0:j_id1:j_id28:criteria:theExportPage" value="Export Page" tabindex="8" class="btn" type="submit"> </td> </tr> </tbody></table></div><div class="pbFooter secondaryPalette"><div class="bg"></div></div></div></div></div> </td> <td valign="top"><div class="apexp"><div class="editPage"><div id="j_id0:j_id1:j_id28:results" class="bPageBlock brndScnBrd bEditBlock secondaryPalette"><div class="pbBody"><table class="list " id="j_id0:j_id1:j_id28:results:j_id46" cellpadding="0" cellspacing="0" border="0"><colgroup span="11"></colgroup><thead class="rich-table-thead"><tr class="headerRow "><th class="headerRow " scope="col" colspan="1" id="j_id0:j_id1:j_id28:results:j_id46:j_id47header">After Run Search click with al in first text box:
<h2 class="mainTitle">Contributions Search v14</h2></td><td> </td></tr></tbody></table></div><div class="pbBody"> <table width="100%" border="0"> <tbody><tr> <td valign="top" width="200"><div class="apexp"><div class="editPage"><div id="j_id0:j_id1:j_id28:criteria" class="bPageBlock brndScnBrd bEditBlock secondaryPalette"><div class="pbHeader"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="pbTitle"><h2 class="mainTitle">Search Criteria</h2></td><td> </td></tr></tbody></table></div><div class="pbBody"> <table cellpadding="2" cellspacing="2"> <tbody><tr> <td style="font-weight: bold;"><br><input class="btn" id="j_id0:j_id1:j_id28:criteria:theSearch0" name="j_id0:j_id1:j_id28:criteria:theSearch0" onclick="A4J.AJAX.Submit('j_id0:j_id1',event,{'similarityGroupingId':'j_id0:j_id1:j_id28:criteria:theSearch0','parameters':{'j_id0:j_id1:j_id28:criteria:theSearch0':'j_id0:j_id1:j_id28:criteria:theSearch0'} } );return false;" value="Run Search" tabindex="0" type="button"> </td> </tr> <tr> <td style="font-weight:bold;">Contributor First Name<br><input id="j_id0:j_id1:j_id28:criteria:contributorFname" name="j_id0:j_id1:j_id28:criteria:contributorFname" tabindex="1" type="text"> </td></tr> <tr> <td style="font-weight:bold;">Contributor Last Name<br><input id="j_id0:j_id1:j_id28:criteria:contributorLname" name="j_id0:j_id1:j_id28:criteria:contributorLname" tabindex="2" type="text"> </td></tr> <tr> <td style="font-weight:bold;">Contributor VFP only<br><input id="j_id0:j_id1:j_id28:criteria:contributorVFP" name="j_id0:j_id1:j_id28:criteria:contributorVFP" tabindex="3" type="checkbox"> </td></tr> <tr> <td style="font-weight:bold;">Contributor State<br><input id="j_id0:j_id1:j_id28:criteria:contributorState" name="j_id0:j_id1:j_id28:criteria:contributorState" tabindex="4" type="text"> </td></tr> <tr> <td style="font-weight:bold;">MOC First Name<br><input id="j_id0:j_id1:j_id28:criteria:MOC_Fname" name="j_id0:j_id1:j_id28:criteria:MOC_Fname" tabindex="5" type="text"> </td></tr> <tr> <td style="font-weight:bold;">MOC Last Name<br><input id="j_id0:j_id1:j_id28:criteria:MOC_Lname" name="j_id0:j_id1:j_id28:criteria:MOC_Lname" tabindex="6" type="text"> </td></tr> <tr> <td style="font-weight: bold;">Record Limit<br><select name="j_id0:j_id1:j_id28:criteria:j_id38" size="1" tabindex="5"> <option value="limit 20" selected="selected">20 Records</option> <option value="limit 100">100 Records</option> <option value="limit 200">200 Records</option> </select> </td></tr> <tr> <td style="font-weight: bold;"><br><input class="btn" id="j_id0:j_id1:j_id28:criteria:theSearch" name="j_id0:j_id1:j_id28:criteria:theSearch" onclick="A4J.AJAX.Submit('j_id0:j_id1',event,{'similarityGroupingId':'j_id0:j_id1:j_id28:criteria:theSearch','parameters':{'j_id0:j_id1:j_id28:criteria:theSearch':'j_id0:j_id1:j_id28:criteria:theSearch'} } );return false;" value="Run Search" accesskey="9" tabindex="7" type="button"> </td> </tr> <tr> <td style="font-weight: bold;"><br><input id="j_id0:j_id1:j_id28:criteria:theExportPage" name="j_id0:j_id1:j_id28:criteria:theExportPage" value="Export Page" tabindex="8" class="btn" type="submit"> </td> </tr> </tbody></table></div><div class="pbFooter secondaryPalette"><div class="bg"></div></div></div></div></div> </td> <td valign="top"><div class="apexp"><div class="editPage"><div xmlns="http://www.w3.org/1999/xhtml" id="j_id0:j_id1:j_id28:results" class="bPageBlock brndScnBrd bEditBlock secondaryPalette"><div class="pbBody"><table class="list" id="j_id0:j_id1:j_id28:results:j_id46" cellpadding="0" cellspacing="0" border="0"><colgroup span="11"></colgroup><thead class="rich-table-thead"><tr class="headerRow"><th class="headerRow" scope="col" colspan="1" id="j_id0:j_id1:j_id28:results:j_id46:j_id47header">Thanks for your help.... Bob