Databases
StackOverflow2013
Postsdbo
POASP.Net Ajax Control Toolkit "UpdatePanelAnimationExtender" breaking jquery focus() onload
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP.Net Ajax Control Toolkit "UpdatePanelAnimationExtender" breaking jquery focus() onload
    text
    copied!<p>I have the following update panel with a text field limited to 9 characters only accepting numbers.</p> <pre><code> &lt;asp:UpdatePanel ID="updatePanelsearchusers" runat="server" UpdateMode="Always"&gt; &lt;ContentTemplate&gt; &lt;div class="formfieldarea"&gt; &lt;div id="searchfield1" class="searchfieldbox"&gt; &lt;asp:Label ID="USIDSearchlbl" runat="server" Text="USID: " CssClass="formlabel" /&gt; &lt;asp:TextBox ID="USIDSearchBox" runat="server" MaxLength="9" /&gt; &lt;cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="USIDSearchBox" ValidChars="0123456789" /&gt; &lt;asp:ImageButton ID="USIDsearchbutton" runat="server" ImageUrl="/tissuebank/images/searchButton.png" CausesValidation="true" OnClick="search1_Click" CssClass="searchbutton" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt;{output from search}&lt;/div&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; </code></pre> <p>And the following JavaScript which will automatically trigger the search button if the number of characters reaches 9.</p> <pre><code> &lt;script type="text/javascript" language="javascript"&gt; function setupUSIDFocus() { $('#&lt;%=USIDSearchBox.ClientID %&gt;').focus().keyup(function () { if ($(this).val().length == 9) { $('.searchbutton').first().click(); } }); } $(document).ready(function () { setupUSIDFocus(); }); &lt;/script&gt; </code></pre> <p>If I have the code as above this works fine and loads with the focus being on the element <strong>USIDSearchBox</strong> as I intended, however when the update panel is updated but the event is no longer assigned to the box and the focus is lost. To fix this I added an ASP.Net Ajax control <em>UpdatePanelAnimationExtender</em> so that the focus and events are reassigned when the request is complete.</p> <pre><code> &lt;AjaxControlToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="updatePanelsearchusers"&gt; &lt;Animations&gt; &lt;OnUpdated&gt; &lt;Sequence&gt; &lt;Parallel duration="0"&gt; &lt;ScriptAction Script="setupUSIDFocus();" /&gt; &lt;/Parallel&gt; &lt;/Sequence&gt; &lt;/OnUpdated&gt; &lt;/Animations&gt; &lt;/AjaxControlToolkit:UpdatePanelAnimationExtender&gt; </code></pre> <p>And indeed this does reset the focus and the keyup event but for some reason the element does not get focus when the page is first loaded. Though the keyup event is still attached onload I am just missing the focus being on the USIDSearchBox field. If I remove the UpdatePanelAnimationExtender then I get the focus back on load, so it must be something to do with this control. </p> <p>Does anyone have any idea how to get the focus onload of the page?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload