Jquery, Tab Panels и вопросы, устанавливающие фокус

0

У меня есть всплывающий экран, используемый для добавления платежей в нашу систему. На этой странице находится вкладка с ручным вводом с использованием DIV. То, что я пытаюсь сделать, - это когда пользователь нажимает на вкладку, загружает вкладку и задает фокус на контроле транзакций на вкладке. У меня есть java-скрипт, который управляет элементом управления вкладками.

То, что я пытаюсь сделать, это то, что в событии OnClick вкладка "кнопка" переключается на вкладку и устанавливает фокус на текстовом поле "Идентификатор транзакции".

Ниже приведена уменьшенная версия страницы:

<asp:Content  runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
                <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">

            <div class="Property StackPanelItem-Left">
                <div class="PropertyLabel" id="divPaymentTypeLabel" runat="server">
                    Select payment type:
                </div>
            </div>
             <div class="Property StackPanelItem-Left">
                <asp:DropDownList ID="ddlPaymentType" runat="server" TabIndex="1"
                    Width="150px" AutoPostBack="true"
                    DataTextField="PAYMENT_TYPE_DESC" DataValueField="PAYMENT_TYPE"
                    OnSelectedIndexChanged="ddlPaymentType_SelectedIndexChanged">
                </asp:DropDownList>
            </div> 
        </div>

        <div id="tabControl1" class="Region-TabControl" style="height: calc(100% - 80px);">

            <div id="tabControl1.TabButtons-Breadcrumbs" class="Region-Header-TabControl Region-Header-Color-Silver" style="text-shadow: none !important;">
                <div id="tabButton.PayeeInfo" class="Breadcrumb Breadcrumb-Normal"  onclick="SetPayeeInfoFocus()" >
                    <div class="Breadcrumb-Text">
                        Payee Info
                    </div>
                </div>
                <div id="tabButton.PayeeContact"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Contact
                    </div>
                </div>
                <div id="tabButton.PayeeAddress"  class="Breadcrumb Breadcrumb-Normal"  >
                    <div class="Breadcrumb-Text">
                        Payee Address
                    </div>
                </div>
                <div id="tabButton.PayeeBank"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Bank
                    </div>
                </div>
                <div id="tabButton.PaymentInfo"  class="Breadcrumb Breadcrumb-Normal" onclick="SetEnterScreenFocus()" >
                    <div class="Breadcrumb-Text">
                        Payment Info
                    </div>
                </div>
                <div id="tabButton.Review"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Review
                    </div>
                </div>
            </div>

            <div id="tabControl1.Panel" class="Region-Content-TabControl" style="height: calc(100% - 40px);">                                           
                <div id="tabPanel.PayeeInfo" class="TabPanel">
                </div>                                                                      
                <div id="tabPanel.PayeeContact" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee contact:
                    </div>                      
                    <uc1:PayeeContacts runat="server" ID="PayeeContact" GridHeight="calc(100% - 36px)" />                    
                </div>

                <div id="tabPanel.PayeeAddress" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee address:
                    </div>
                    <uc1:PayeeAddresses runat="server" ID="PayeeAddress" GridHeight="calc(100% - 36px)" />
                </div>

                <div id="tabPanel.PayeeBank" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee bank:
                    </div>
                    <uc1:PayeeBanks runat="server" ID="PayeeBank" GridHeight="calc(100% - 36px)" />
                </div> 

                <div id="tabPanel.PaymentInfo" class="TabPanel">                       
                    <div class="PropertyLabel" id="divEnterPaymentInfoHeader" runat="server" style="font-size: 16px; border-bottom: 1px solid #000; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Enter your payment information:
                    </div>

                        <div style="padding-top: 4px; padding-left: 4px; height: 52px; width: 100%;">
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Transaction ID
                                </div>
                                <asp:TextBox ID="txtEnterTransactionID" Width="175" MaxLength="20" TabIndex="2" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Account Number with Payee
                                </div>
                                <asp:TextBox ID="txtEnterAccountNumber" MaxLength="22" Width="175" TabIndex="3" CssClass="PropertyTextBox" runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left" id="divEnterPaymentInfo_CheckNumber" runat="server">
                                 <div class="PropertyLabel">
                                    Check Number
                                </div>
                                <asp:TextBox ID="txtEnterCheckNumber" MaxLength="15" TabIndex="4" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                        </div>                                                                                                                                                                     
                    </div> 
                <div id="tabPanel.Review" class="TabPanel">                                                 
                </div>
           </div>
         </div>              
         <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">
            <div class="Property StackPanelItem-Right">
                <asp:Button  ID="btnBack" Text="Back" runat="server"/>                        
                <asp:Button ID="btnNext" Text="Next" runat="server"/>
            </div>
        </div>

</asp:Content>

Вот jquery, который я использую:

функция SetEnterScreenFocus() {

document.getElementById("ContentPlaceHolder1_txtEnterDRCTransactionID").focus();

}

Я использую тест на этом этапе только потому, что пытался проверить, что элемент загружается.

JQuery находит объект, но фокус не работает. Что мне здесь не хватает?

Заранее спасибо.

Теги:
tabs

1 ответ

0
Лучший ответ

Ok Нашел вопрос - это была проблема времени. Вот как я это решил:

function SetEnterScreenFocus() {
    $('tabPanel.PaymentInfo').show();
    setTimeout(function () { document.getElementById('ContentPlaceHolder1_txtEnterTransactionID').focus(); }, 10);
}

Работы - не уверены, есть ли еще какие-то проблемы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню