1

I have an ASP.Net page with 3 textboxes and 1 radiobuttonlist. Each of the 4 controls has

class="tabbable"

in its definition. Here's the complete markup:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="approvalacctprocess.ascx.cs" Inherits="cmc.workflow.ui.ApprovalAcctProcess" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register tagprefix="CMC" Tagname="ApprovalComments" src="~/workflow\ui\ApprovalComments.ascx" %>
<script src="../../Scripts/jquery-1.4.1.js"></script>
<asp:Panel ID="pnlApprovalAC" CssClass="STDPANEL" HorizontalAlign="Center" Runat="server" Width="550">
    <TABLE cols="2" width="520">
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Client Number</TD>
            <TD>
                <asp:TextBox id=txtclnum style="VERTICAL-ALIGN: top" Width="300" Runat="server" CssClass="FLDVALUE" TabIndex="0" onchange="MoveNext(this);" Text='<%# Property["clnum"] %>' MaxLength="14" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
                <asp:RegularExpressionValidator id="rxClNum" ValidationExpression="^[0-9]+[&#9;]*$|Clt Number TBD" ErrorMessage="Client Number consists of up to 14 numbers"
                    ControlToValidate="txtclnum" runat="Server"></asp:RegularExpressionValidator></TD>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Matter Number (5-6 digit)</TD>
            <TD>
                <asp:Label id=lbclnum style="TEXT-ALIGN: right" Width="140" Runat="server" Text='<%# Property["clnum"] %>' Font-Name="verdana" Font-Size="x-small">
                </asp:Label>-
                <asp:TextBox id=txtmmatter Width="150" Runat="server" CssClass="FLDVALUE" TabIndex="1" Text='<%# Property["mmatter"] %>' MaxLength="6" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
            </TD>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <tr>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colspan="2"><asp:Label runat="server" ID="lbExistingClientQuestion" Text="Is there an Engagement Letter on file for this client?" Visible="false" />&nbsp;&nbsp;
        <asp:Label runat="server" ID="lbUDFRetainerLetter" Text='<%# Property["RetainerLetter"] %>' Visible="false" /></td>
        </tr>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colSpan="2">Has a
                retainer/engagement letter been submitted and approved by Charlotte Fischman?</TD>
        </TR>
        <TR>
            <TD colSpan="2">
                <asp:RadioButtonList id="rblRetLtrReturned" TabIndex="2" Runat="server" CssClass="RADIOBUTTONLIST" RepeatDirection="Horizontal" class="tabbable"
                    RepeatLayout="Table" RepeatColumns="1" width="300" AutoPostBack="True">
                    <asp:ListItem Value="0">No</asp:ListItem>
                    <asp:ListItem Value="1">Yes</asp:ListItem>
                </asp:RadioButtonList>
                <asp:Label id="lblnoretainerltrneeded" Runat="server" CssClass="SMALLNOTE" Text="(This is an existing client and the matter is in an existing area of law.&#13;&#10;&#9;&#9;&#9;&#9;&nbsp;&nbsp; A retainer letter may not be needed.)"
                    Font-Size="xx-small" Visible="False" ForeColor="red"></asp:Label></TD>
        </TR>
        <TR>
            <TD colSpan="2">
            </TD>
        </TR>
        <TR>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" colSpan="2" width="500">Reason for Not Submitting an Retainer/Engagement Letter for Approval<SPAN style="FONT-WEIGHT: bold; COLOR: red">
                                *</SPAN>&nbsp;
            <asp:Label runat="server" CssClass="SMALLNOTE" Text="(Required if no retainer letter submitted and not an existing client)" Font-Size="XX-Small" ForeColor="Red" /></td>
        </TR>
        <TR>
            <td colspan="2">
                <asp:TextBox Width="500" runat="server" TextMode="MultiLine" TabIndex="3" CssClass="FLDVALUE" ID="txtReason" MaxLength="500" Text='<%# Property["Reason"] %>' AutoPostBack="True" class="tabbable" />

            </td>
        </TR>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Comments</TD>
            <TD>
                <asp:TextBox id="txtComments" style="VERTICAL-ALIGN: top" Width="300" TabIndex="4" Runat="server" CssClass="FLDVALUE"
                    MaxLength="450" Rows="5" TextMode="MultiLine" Text='<%# Property["AcctgComment"] %>' AutoPostBack="True" class="tabbable"></asp:TextBox></TD>
        </TR>
    </TABLE>
    <TABLE class="STDPANEL" style="VERTICAL-ALIGN: middle" height="50" width="550">
        <TR>
            <td align="center">
                <input id="btnSaveACProperty" runat="server" name="btnSaveACProperty" 
                    onserverclick="OnSave_Click" type="submit" value="Save Status and Comment">
                    &nbsp;&nbsp;
                    <input id="btnResetACProperty" runat="server" name="btnResetACProperty" 
                        type="reset" value="Cancel">
                    </input>
                </input>
            </td>
        <tr>
            <td align="left">
                <asp:ValidationSummary ID="valsum" runat="server" BorderColor="" 
                    BorderStyle="Solid" BorderWidth="2" CssClass="VALIDATORSUM" DisplayMode="List" 
                    Font-Bold="True" ForeColor="red" 
                    HeaderText="  Some errors occurred in your input.  Please correct them:&lt;br&gt; " 
                    ShowMessageBox="True" ShowSummary="True" Width="500" />
            </td>
        </tr>
    </TABLE>
</asp:Panel>
<script type="text/vbscript">

</script>
<script type="text/javascript" lang="javascript">
    function MoveNext(ele) {
        $(document).ready(function () {
            var lastTabIndex = 4;
            var currentElementID = ele.id; // ID set by OnFocusIn
            var currentElement = document.getElementById(currentElementID);
            var curIndex = currentElement.tabIndex; //get current elements tab index
            if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
                curIndex = 0;
            }
            var tabbables = document.querySelectorAll("tabbable"); //get all tabbable elements
            alert(tabbables.length);
            for (var i = 0; i < tabbables.length; i++) { //loop through each element
                if (tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
                    tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
                    break;
                }
            }
        });
    }
</script>

The textbox txtclnum calls the javascript function MoveNext at the bottom of the page (just to make sure everything loads in the right order)(this is taken from the first answer to this question). MoveNext has an alert in it to tell me what tabbables.length is. The alert returns 0 because the CssClass in the .Net controls overwrites the class="tabbable" in the HTML. I've tried

var tabbables = document.getElementsByTagName("*");

which gets me to the correct control, but the focus doesn't stay on that control. How can I keep the focus on the control?

7
  • 2
    You need to call document.querySelectorAll('.tabbable'). The . is what tells it you're looking at classes. Read up on CSS selectors to get an idea of how to use querySelector and querySelectorAll.
    – Mike Cluck
    Apr 14, 2016 at 21:30
  • I'd be grateful if whoever downvoted this question could post why. Thanks.
    – Melanie
    Apr 15, 2016 at 13:30
  • Probably because you could have figured out the solution by reading the documentation on querySelectorAll. By the way, did any of the posted solutions help you? If so, please select one as the answer, otherwise update your question to include why they haven't helped.
    – Mike Cluck
    Apr 15, 2016 at 15:20
  • 1
    OK, but in my defense, I was using a StackOverflow answer (see my question for the link) that was marked as the correct answer and upvoted 8 times, so it never occurred to me that I was using querySelectorAll incorrectly. I thought there was something else wrong that was peculiar to my particular case.
    – Melanie
    Apr 15, 2016 at 17:04
  • 1
    I guarantee you that document.querySelectorAll('.tabbable') will work if there are any elements with the class "tabbable". If it isn't, double check your DOM (you can do this from your developer tools by hitting F12) because that means you don't have any elements with the class "tabbable".
    – Mike Cluck
    Apr 15, 2016 at 17:10

4 Answers 4

8

That function takes as its argument a CSS selector, so if you're looking for elements with class "tabbable" you would use document.querySelectorAll(".tabbable")

1
  • 4
    I tried this, but I'm still getting 0 as tabbable.length.
    – Melanie
    Apr 15, 2016 at 17:08
2

OK, I feel like an idiot. Just for others' future reference, the problem was that 1) there's a Cssclass assigned to those controls, which overrides my tabbable class in the HTML markup; and 2) once I took care of that (see below code), it still wasn't working because (duh) each control had an AutoPostBack=true on it (they used to have server-side code attached to them). Now that AutoPostBack is false, my code works fine. Here it is:

<script type="text/javascript" lang="javascript">
function MoveNext(currentElement, btnID) {
    $(document).ready(function () {
        var saveButton = document.getElementById(btnID);
        saveButton.disabled = false;
        var lastTabIndex = 4;
        var curIndex = currentElement.tabIndex; //get current elements tab index
        if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
            curIndex = 0;
        }
        var tabbables = document.getElementsByTagName("*"); //get all tabbable elements
        for (var i = 0; i < tabbables.length; i++) { //loop through each element
            if (tabbables[i].tabIndex != null & tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
                tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
                break;
            }
        }
    });
}

Thanks to everyone for their help.

1

Since tabbable is a class, you need to put a period in front of it in your queryselector, so it should be:

document.querySelectorAll(".tabbable")

Edit: Just further clarification, the queryselector without the "." would be looking for html tags like <tabbable>. Since that does not exist, the length returned is 0.

1
  • 2
    I tried this, but I'm still getting 0 as tabbable.length.
    – Melanie
    Apr 15, 2016 at 17:08
1

The way you're using it, document.querySelectorAll("tabbable") is looking for an element of the tag <tabbable>. Since it looks like you're trying to query by a class, add the period to denote it is such.

document.querySelectorAll(".tabbable")

When you use document.getElementsByClassName("tabbable") it could work, so I could see where you could get confused if you've used that method in the past.

3
  • I tried this, but I'm still getting 0 as tabbable.length. Using getElementsByClassName also returns 0 as tabbable.length.
    – Melanie
    Apr 15, 2016 at 17:08
  • Can you double-check your HTML code? It doesn't look like the tags are closed properly. For example, the first <tr> doesn't have a matching </tr> before the next one.
    – Quinto
    Apr 15, 2016 at 17:22
  • You're absolutely right. I was missing a field closing tags. I've added them, but it doesn't help, alas. However, please see my edited question. I'm now able to find the control with the next tabindex, but it almostly instantly loses focus and I'm not sure why.
    – Melanie
    Apr 15, 2016 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.