tags:

views:

125

answers:

1

I have a jQuery toggle div that appears onclick of the link.

<p><a id="slick-toggle1" href="#">Yes, enroll me today!</a></p> 

<div id="login"> 
<!--#include virtual="LoginPopup.asp"--> 
</div>

in LoginPopup.asp i can not get the focus to go to the first field of username

$(document).ready(function() { 

$('#slickbox1').hide(); 

$('a#slick-toggle1').click(function() { 
$('#login').toggle(300); 
return false; 
}); 

//#SecLoginP is ID of form 

$("#SecLoginP :input:visible:enabled:first").focus(); 

});  

when the toggled DIV appears, i can see the cursor in the field, but when it finishes loading, it dissapears...?

any ideas?

+1  A: 

That shouldn't actually call focus on the underlying HTML element.

Try

$('#SecLoginP ...').get(0).focus();

This is confusing, but $(elem).focus() triggers the focus events bound on the element, rather than hitting the actual HTML element's focus method.

Stefan Kendall
I get an error: 'get(...)is null or not an object' you said this right:$("#SecLoginP :input:visible:enabled:first").get(0).focus();
tony noriega
Yes. What version of jQuery are you using? The point here is that you need to get the actual DOM object out of the jQuery object, then call `focus()` on that. How you do that may differ between versions, I guess.
Stefan Kendall
Try $('#...')[0].focus()
Stefan Kendall
Ok, two follow ups here... and please forgive my novice-ness...What if this input field is originally hidden by the DIV [display:none;] ?Also, if there is another field on the page, that has .focus applied to it, would that cause some sort of conflict? in my research i found that i may have to use something like [triggerHandler] to shif the focus to the new form field, once it is displayed by .click in the toggle.js
tony noriega
OH, jQuery V 1.3.2
tony noriega
As long as the item you want to focus is currently visible (handled by your :visible) selector, you should be fine. There shouldn't be any conflict between changing focus programatically. Can you put up a test page that illustrates the problem you're having?
Stefan Kendall
you will see in the left column, tha the focus is put to the first field in the username input field. then if you click "Yes enroll me today" it calls the hidden DIV with the input fields, but the focus does not shift to the first field.https://www.bcidaho.com/go-green/index2.asp
tony noriega
:). You have two input elements with the same ID. jQuery will short-circuit when it finds the first input element of hte given ID and select THAT element each time. Either give the popup input another ID, or select it some other way.
Stefan Kendall