Formatting a jQuery form after creating an element

Question

Seek some help with my jQuery code.

I am creating a modal box using a simple modem

I manage to create a modal block when I click an element that contains a form ... I would like the form to focus on the textarea field when it appears, but I'm not sure how to achieve this ..

Here is my current code.

$('#showModal a').live('click',(function(){ // Build Modal Box Container And Add to Page $('<div id="osx-modal-content">\ <div id="osx-modal-title"><h2>Please explain this song.</h2></div>\ <div id="osx-modal-data"> \ <p class="loaderGif"> <img src="http://localhost:8500/mxRestore/images/ajax-loader.gif"> </p>\ </div>\ </div>').appendTo('body'); //Set Modal Box Options $("#osx-modal-content").modal({ // OPTIONS SET HERE overlayClose:true, onOpen:OSX.open, onClose:OSX.close }); // I have a hidden form on the page...grab its HTML!! var modalForm = $('#addTmWrapper').html(); // Dynamically build a text area and add to the form... // The text area from my hidden form wont show properly for some reason.....maybe a coldfusion issue var textField= '' textField+= '<textarea name=' + '"sMessage"' + 'id="sMessages"' + 'cols="62"' + 'rows="3"' + 'class="textarea word_count">' + '</textarea>' // Add hidden form to modal box, add textarea to form.. // Then show it $('#osx-modal-data').html(modalForm ).find('#addTmForm') .prepend(textField) .show(); return false })); 

I wonder how I can make textarea focus when a modal window appears?

Any help would be appreciated, thanks

Answer 1

To focus on the form element, use focus() .

 $('#myElement').focus() 

Answer 2

try the following:

 var aSet = $('selector'); aSet[0].focus(); 

focus above applies to the element, not the jQuery object.

Answer 3

Just before return false; add $('#sMessages').focus(); (see jQuery docs ).

Answer 4

use

 $('selector').trigger('focus'); 

instead

 $('selector').focus(); 

($ (...). focus (function () {}) binds the event focus function without focusing.)

Answer 5

Wrap it at a time. To make it work: as done here

 setTimeout(function(){ $('selector').focus(); }, 0);