JQuery thickbox with iframe. Set focus to input field

Question

Hi I had a jquery thickbox modal popup on my application. (iframe)
Everything works great but I want to set the focus to a specific input field.

The Iframe loads a normal aspx page so I thought I'd do a $(document).ready(..focus);
I put that script in the IFrame code

However this does not work. I believe that after the "ready" some other code is executed by the thickbox so that it loses focus again. (for instance.. I CAN set the value of the input field so the mechanism does work..

Can anybody help me set the focus ? Below is my calling code..

<a href="page.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=550&width=700" title="Add" class="thickbox">Add</a>

Answer 1

From docs.jquery.com:

Triggers the focus event of each matched element.

This causes all of the functions that have been bound to the focus event to be executed. Note that this does not execute the focus method of the underlying elements.

That means, your code should more likely be: $('#input_field').get(0).focus ()

The difference is, that you use in my example the DOM element's own focus element, whereas in yours you use jQuery's.

That still doesn't work, but is perhaps a step in the right direction.

Cheers,

Answer 2

ThickBox displays the iframe's container by calling a method in the onload event of the iframe element. Since the iframe is hidden on the parent page until after the iframe's content is loaded you cannot set the focus simply using $(document).ready(..focus);. The easiest way I've found to get around this is to use setTimeout to delay the function call that sets the focus until after the iframe is displayed:

jQuery(document).ready(function() {        
    setTimeout(function(){
        $('#YourElementID').focus();   
    },200);
});

Note: You might have to adjust the milliseconds value you pass to setTimeout.