Databases
StackOverflow2013
Postsdbo
POTwitter bootstrap dropdown input field not gaining working with focus() method
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter bootstrap dropdown input field not gaining working with focus() method
    text
    copied!<p>I have an issue with gaining focus on my first input field in my login dropdown. I'm using jquery 1.7.2 and bootstrap 2.1.1 with only the modal and dropdown functions. They both work great, I call dropdowns and modals through data target and not JS.</p> <p>I've been trying for hours and searching for answers everywhere but I can't find a way to get my first input field (#j_username) to gain focus when the dropdown is shown.</p> <p>The shown event from bootstrap does not fire, so I did a jQuery on() event which fires fine. My selector works fine, I've tested it in the console with other methods (hide() and show(), and various ways of selecting the same field (either its id #j_username) or ($("#fields input:first").</p> <p>The event fires correctly but no way to get the input field to gain focus. I've tried HTML5's autofocus property but it doesn't seem to work either.</p> <p>Any ideas? Thanks in advance</p> <p>The handler is part of function onPageReady().</p> <pre><code>$("#loginlnk").on('click', function(){ console.log("FIRE"); $("#j_username").focus(); }); &lt;span class="span-dropdown"&gt; &lt;button class="dropdown-toggle btn grey" role="button" id="loginlnk" data-toggle="dropdown" href='#'&gt;Login&lt;/button&gt; &lt;div class="dropdown-menu auth" role="menu" id="signin" aria-labelledby="loginlnk"&gt; &lt;form-login action="/j_spring_security_check" method="POST" always-use-default-target='false' default-target-url="/home.do" authentication-failure-url="/welcome.do" /&gt; &lt;div class="dropdown-caret right"&gt; &lt;span class="caret-outer"&gt;&lt;/span&gt; &lt;span class="caret-inner"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="fields"&gt; &lt;div id="username"&gt;Enter your email address &lt;input class="inputs login" autofocus="autofocus" id="j_username" name="j_username"&gt; &lt;/div&gt; &lt;div id="password"&gt;Password &lt;input class="inputs login" id ="j_password" name="j_password" type="password" &gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="submit"&gt; &lt;button class="btn mapit" id="signinbtn" type="submit" value="Login" onClick="login(1)" tabindex="102"&gt;Login&lt;/button&gt; &lt;/div&gt; &lt;div id="links"&gt; &lt;a id="pwdlnk" href="javascript:lostPwd();"&gt;Lost your password?&lt;/a&gt; &lt;/div&gt; &lt;div id="lostpwd"&gt; Enter your email to receive recovery instructions. &lt;div class="container"&gt; &lt;input class="inputs login" type="email" id="lost_username" tabindex="400"&gt; &lt;button class="btn" id="lostpwdbtn" type="submit" value="" onClick="forgotPassword()" tabindex="401"&gt;Recover&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form-login&gt; </code></pre> <p> </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