ASP.Net Ajax Control Toolkit "UpdatePanelAnimationExtender", ломающий фокус jquery () - PullRequest
1 голос
/ 24 ноября 2011

У меня есть следующая панель обновления с текстовым полем, ограниченным 9 символами, принимающими только цифры.

 <asp:UpdatePanel ID="updatePanelsearchusers" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div class="formfieldarea">
            <div id="searchfield1" class="searchfieldbox">
                <asp:Label ID="USIDSearchlbl" runat="server" Text="USID: " CssClass="formlabel" />
                <asp:TextBox ID="USIDSearchBox" runat="server" MaxLength="9" />
                <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="USIDSearchBox" ValidChars="0123456789" />
                <asp:ImageButton ID="USIDsearchbutton" runat="server" ImageUrl="/tissuebank/images/searchButton.png" CausesValidation="true" OnClick="search1_Click" CssClass="searchbutton" />
            </div>
        </div>
        <div>{output from search}</div>
    </ContentTemplate>
 </asp:UpdatePanel>

И следующий JavaScript, который автоматически активирует кнопку поиска, если количество символов достигает 9.

 <script type="text/javascript" language="javascript">
    function setupUSIDFocus() {
        $('#<%=USIDSearchBox.ClientID %>').focus().keyup(function () { 
           if ($(this).val().length == 9) { 
                $('.searchbutton').first().click(); 
           } 
        });
    }
    $(document).ready(function () { setupUSIDFocus(); });
 </script>  

Если у меня есть код, как указано выше, он работает нормально и загружается с фокусом на элементе USIDSearchBox , как я и предполагал, однако, когда панель обновления обновляется, но событие больше не назначается блоку и фокус потерян. Чтобы исправить это, я добавил элемент управления ASP.Net Ajax UpdatePanelAnimationExtender , чтобы фокус и события переназначались после завершения запроса.

  <AjaxControlToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="updatePanelsearchusers">
      <Animations>
          <OnUpdated>
              <Sequence>
                  <Parallel duration="0">
                      <ScriptAction Script="setupUSIDFocus();" />   
                  </Parallel>             
              </Sequence>
          </OnUpdated>
      </Animations>        
  </AjaxControlToolkit:UpdatePanelAnimationExtender>

И действительно, это сбрасывает фокус и событие keyup, но по какой-то причине элемент не получает фокус при первой загрузке страницы. Несмотря на то, что событие keyup по-прежнему подключено при загрузке, я просто упускаю фокус на поле USIDSearchBox. Если я удаляю UpdatePanelAnimationExtender, я снова получаю фокус на загрузке, так что это должно быть связано с этим элементом управления.

Кто-нибудь знает, как сфокусироваться на загрузке страницы?

1 Ответ

2 голосов
/ 24 ноября 2011

Кроме того, вы можете использовать ScriptManager.RegisterStartupScript в search1_Click для вызова функции jQuery после обновления ajax:

ScriptManager.RegisterStartupScript(this,this.GetType(),"myscript","setupUSIDFocus();",true);
...