Set focus to field in dynamically loaded DIV

Question

What is the proper method to set the focus to a specific field within a dynamically loaded DIV       display   load   control msgs       loads the HTML into the DIV     display   fadeIn  fast       display it    tex header   focus                   neither that    input header   focus                 nor that     display     header   focus          nor that     header   focus                      nor that works   The following HTML is fetched into the display DIV    lt div id  display  gt   lt form id  newHeaderForm  class  dataform  action     method  post  gt       lt input id  to  type  hidden  value  22  name  to   gt       lt dl gt           lt dt gt Header lt  dt gt           lt dd gt               lt input id  header  class  large  type  text  name  header  value    maxlength  128   gt           lt  dd gt    lt  form gt    lt  div gt    Many  many thanks

User · Answer

Dynamically added items have to be added to the DOM    clone   append   adds it to the DOM    which allows it to be selected via jquery

User · Answer

Yes  this happens when manipulating an element which doesn t exist yet  a few contributors here also made a good point with the unique ID   I ran into a similar issue  I also need to pass an argument to the function manipulating the element soon to be rendered  The solution checked off here didn t help me  Finally I found one that worked right out of the box  And it s very pretty  too - a callback  Instead of       header    focus    or the tempting  setTimeout       header    focus    500     Try this  setTimeout  function          header    focus      500     In my code  testing passing the argument  this didn t work  the timeout was ignored  setTimeout  alert   Hello    name    1000     This works  the timeout ticks  setTimeout  function     alert   Hello    name      1000     It sucks that w3schools doesn t mention it  Credits go to  makemineatriple com  Hopefully  this helps somebody who comes here

User · Answer

Have you tried simply selecting by Id       header   focus      Seeing as Ids should be unique  there s no need to have a more specific selector

User · Answer

This runs on page load    lt script type  text javascript  gt        function                  header   focus             lt  script gt

User · Answer

display   load   control msgs       function            header   focus          i tried it but it doesn t work  please give me more advice to resolve this problem  thanks for your help

User · Answer

function            body   on  keypress    sobitie snses input  function e           if e keyCode  13                 this  blur                var new fild      this  clone   val                    this  parent   append new fild                 new fild  focus                            most of error are because U use wrong object to set the prorepty or function  Use console log new fild   to see to what object U try to set the prorepty or function

User · Answer

The load   function is an asynchronous function  You should set the focus after the load   call finishes  that is in the callback function of load    because otherwise the element you are referring to by  header  does not yet exist  For example        display   load   control msgs       function            header   focus           I had issues myself even with this solution  so i did a setTimeout in the callback and set the focus in the timeout to make  really  sure the element exists

User · Answer

If      header   focus      is not working then is there another element on your page with the id of header   Use firebug to run     header   and see what it returns

User · Answer

header   attr  tabindex   -1  focus

User · Answer

As Omu pointed out  you must set the focus in a document ready function  jQuery provides it for you  And do select on an id  For example  if you have a login page     function         login-user-name   focus           jQuery rocks

[jquery] Set focus to field in dynamically loaded DIV

Examples related to jquery

Examples related to html

Examples related to focus

Examples related to setfocus