views:

618

answers:

2

Hi,

I use h:selectOneRadio tag.
I need to set the cursor focus to first radio field.

<f:view>
<html>
     <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
     </head>
     <body>
         <h:form id="focusForm" >
              <h:selectOneRadio id="testRadioId" value="">
                     <f:selectItem id="si1" itemLabel="JSF" />
                     <f:selectItem id="si2" itemLabel="JSP" />
              </h:selectOneRadio>
         </h:form>
</body></html></f:view>

here The Firefox (browser) assign id :focusForm:testRadioId:0 that field.
So i use the following script:

document.getElementById("focusForm:testRadioId:0").focus();

But,
Some times, i may change dynamically disable the radio field from backing bean.

<h:selectOneRadio id="testRadioId" value="">
                 <f:selectItem id="si1" itemLabel="JSF" itemDisabled="true"/>
                 <f:selectItem id="si2" itemLabel="JSP" />
</h:selectOneRadio>

So here i disable the first radio button.
Now, If i use the same script, then not set cursor focus to first radio field.
how to handle this? that means how to alter my script dynamically during onload?

Please help me.
Thanks in advance.


Update:

Thanks BaluC.

The following code is worked.

 <a4j:loadScript src="resource://jquery.js"/>
 <script type="text/javascript">   
         function setFocusRadioField()
         {
              jQuery(':input:visible:enabled:first').focus(); 
          }
 </script>

<body onload="setFocusRadioField();">
</body>

But the following code is not worked. I test the following way:

jQuery('#focusForm\:testRadioId:enabled:first').focus();

Then,

jQuery('#focusForm\\:testRadioId:enabled:first').focus();

Then,

var id = "#focusForm:testRadioId:enabled:first".replace(/:/g, "\\:");
jQuery(id).focus();

I don't know where i make the error. Better, I need set the cursor focus using id. Thanks in advance.

+1  A: 

Since you tagged jQuery, here's a jQuery solution:

$('[id^=focusForm:testRadioId]:enabled:first').focus();

The [id^=name] selector will return all elements starting with name name.

If your intent is actually to focus the first non-hidden and non-disabled input element of the page, regardless of the input type, then use this:

$(':input:visible:enabled:first').focus();
BalusC
Thanks for your full support. Now i check it the first code. [id^=name]. Its perfectly worked.
EswaraMoorthyNEC
But not worked in IE6,IE8.
EswaraMoorthyNEC
$('[id^=focusForm:testRadioId]:enabled:first').focus();Its worked in FIreFox. Not worked in IE6,IE8.I have no other browser. Still i am not check any other browser.
EswaraMoorthyNEC
It should work. Does they all have a `name` attribute?
BalusC
ya.i check it. Its worked in IE's. But one problem in IE:After page loading, i can't see the cursor focus in radio field.But, if i press TAB button (first time after page load), then move the cursor focus to the next component.
EswaraMoorthyNEC
For example , i have TEXTFIELD-1, radio-Field, TEXTFIELD-2 . I wrote code for focus the radio field during onload . In IE8, After loading , i can't see the cursor focus to radio field. But after loading i press tab key, then move the cursor focus to TEXTFIELD-2.This problem onle IE. Not FireFox.
EswaraMoorthyNEC
A: 

(moved update into question, please delete this "answer")

EswaraMoorthyNEC
You should not post questions or updates as **answers**. They may get lost into noise. Use `add comment` link below answers to notify answerers. I've moved your update back into question and I've updated my answer as well. Sorry for the initially wrong answer, I wasn't thinking clear.
BalusC