8 Replies Latest reply on May 28, 2012 5:53 AM by Mahesh Bonagiri

    Submitting form by pressing RETURN in an h:inputText (displayed as a rich:popupPanel) not working

    Karsten Wutzke Expert

      Hello,

       

      I have a popup panel with a simple text field which I'd like to execute a form submit on pressing RET when inside the h:inputText component. I manage such an input popup as a Facelets sub view (note the #{popupX} and #{inputTextX} params etc., they are just <ui:param>s passed to a <ui:include>):

      {code:xml}

      <rich:popupPanel modal="true"

                       height="#{popupHeight}"

                       resizeable="#{popupResizable}"

                       onmaskclick="#{rich:component(popupId)}.hide(); return false;"

                       id="#{popupId}">

        <f:facet name="header">

          <h:outputText value="#{popupHeaderText}" />

        </f:facet>

        <f:facet name="controls">

          <h:outputLink value="#" onclick="#{rich:component(popupId)}.hide(); return false;">

            <h:outputText value="X" />

          </h:outputLink>

        </f:facet>

        <h:panelGroup>

          <p>#{popupSubject}</p>

        </h:panelGroup>

        <h:panelGroup>

          <p>

            <h:inputText value="#{inputTextBean[inputTextProperty]}"

                         onkeydown="if(event.keyCode == 13){#{rich:component(acceptButtonId)}.click(); return true;}if(event.keyCode == 27){#{rich:component(popupId)}.hide(); return false;}"

                         styleClass="full-width"

                         id="#{inputTextId}" />

          </p>

        </h:panelGroup>

        <h:panelGrid columns="2" style="margin: 0 auto;">

          <h:commandButton value="#{acceptButtonText}"

                           action="#{acceptButtonBean[acceptButtonMethod](acceptButtonMethodArg)}"

                           onclick="#{rich:component(popupId)}.hide(); return true;"

                           id="#{acceptButtonId}">

            <a4j:ajax execute="@this #{inputTextId}" render="@form" />

          </h:commandButton>

          <h:commandButton value="#{cancelButtonText}" onclick="#{rich:component(popupId)}.hide(); return false;" immediate="true" />

        </h:panelGrid>

      </rich:popupPanel>{code}

      Here's the popup in action:

      rf4-popup.png

      I have found this https://community.jboss.org/thread/194655 to be useful and the hiding by ESC works (event.keyCode == 27), however implementing the form submit (event.keyCode == 13) as a simulated button click doesn't.

       

      Here's the relevant code only:

      {code:xml}  ...

        <h:inputText ...

                     onkeydown="if(event.keyCode == 13){#{rich:component(acceptButtonId)}.click(); return true;} if(event.keyCode == 27){#{rich:component(popupId)}.hide(); return false;}"

                     ... />

        ...

        <h:commandButton ...

                         id="#{acceptButtonId}">

        ...{code}

      The problem here is that the rich:popupPanel + h:commandButtons are part of a panel that's displayed in a rich:tree (one popup per rich:treeNode), so the generated popup IDs are dynamic depending on where the popup is in the tree. The generated IDs look like this (here the popup):

      {code:xml}...

      <div id="tree-form:document-tree-one:__root__:add-root-chapter-popup" style="visibility: hidden;">

      ...

      <div id="tree-form:document-tree-one:__root__.TreeKey_-98854384:add-nested-chapter-popup" style="visibility: hidden;">

      ...{code}

      Inside the popup there's the h:commandButton with the ID #{acceptButtonId} that I want to simulate the click on RET press. I exchanged the JS document.getElementById(...) from the forum thread solution mentioned above by rich:component to find the button the way the popup is found.

       

      But Firebug tells me that

      {code:xml}RichFaces.$("tree-form:document-tree-one:__root__:new-root-chapter-name-button") is undefined{code}

      In the generated HTML page the popup OK button appears as:

      {code:xml}<input id="tree-form:document-tree-one:__root__:new-root-chapter-name-button" type="submit" name="tree-form:document-tree-one:__root__:new-root-chapter-name-button" value="OK" onclick="jsf.util.chain(this,event,'RichFaces.$(\'tree-form:document-tree-one:__root__:add-root-chapter-popup\').hide(); return true;','RichFaces.ajax(this,event,{&quot;parameters&quot;:{&quot;javax.faces.behavior.event&quot;:&quot;action&quot;,&quot;org.richfaces.ajax.component&quot;:&quot;tree\\u002Dform:document\\u002Dtree\\u002Done:__root__:new\\u002Droot\\u002Dchapter\\u002Dname\\u002Dbutton&quot;} ,&quot;sourceId&quot;:this} )');return false" />{code}

       

      What's wrong with this? The popup just doesn't submit the form. The IDs used in the generated RichFaces.$() expression appear to be correct if you ask me.

       

      Note, that using an <a4j:commandButton> makes no difference here.

       

      Can anyone help?

       

      Karsten