Richfaces modal panel autofocus first input element

With jQuery it’s easy to focus the first visible input element (textfield, textarea or selectbox) for a rich:modalPanel:

<rich:modalPanel onshow="autofocus('dialog_content')">
  <h:panelGrid id="dialog_content" columns="1" width="100%" cellpadding="0" cellspacing="0">
     <a4j:form ajaxSubmit="true">
       <h:outputLabel value="What's your name:" for="name"/>
       <h:inputText  id="name" value="#{bean.name}"/>
       ...
       <a4j:commandButton id="save" value="Save my name" action="save"/>
     </a4j:form>
  </h:panelGrid>
</rich:modalPanel>

function autofocus(containerId) {
  var element = jQuery(":input:not(:button):visible:enabled:first", '#'+containerId);
  if (element != null) {
    element.focus().select();
  }
}

Advertisements