5 Replies Latest reply on Jul 1, 2010 9:55 PM by shanikaweerapperuma

    Initial focus to h:inputText dissappeares with value

    shanikaweerapperuma

      Hi,

       

      I'm using JSF with facelets. I have an issue with regard to two h:inputText fields that i have in an a:outputPanel.

       

      Issue is that when i key in a value in first h:inputText, tab and get the focus in the second h:inputText, the cursor  gets in to the second h:inputText but then it gets dissappeared all of a sudden (I pressume it gets rerendered).  The worst is, before it gets dissappeared if you have quickly keyed in something, that value also gets dissappeared.  Therefore the user always have to tab to go to the seconed h:inputText wait for the cursor to dissapear, then click on the h:inputText again and key in the value, which is not so user friendly.

       

      Can anyone please tell me how to fix this? My code is given below.

       

       

      <a:outputPanel id="periodNum" ajaxRendered="true">        
            <rich:panel id="periodNumForm" rendered="#{WRMaintenance.exemptionType == 'PN'}" style="border: 0px; width: 535px; background-color: #ECF4FE; align:left">
               <fieldset>
                   <s:decorate id="pFromField" template="layout/edit.xhtml">
                      <ui:define name="label">From:</ui:define>
                      <h:inputText id="pFrom" valueChangeListener="#{WRMaintenance.pnFromValueChanged}" size="30" style=" width: 161px;"
                        value="#{WRMaintenance.pFromInputValue}" >       
                              <a:support event="onchange" ajaxSingle="true" reRender="pFrom"/>
                              <f:validateLength maximum="30"/>
                      </h:inputText>
                  </s:decorate>
                  <s:decorate id="pToField" template="layout/edit.xhtml">
                      <ui:define name="label">To:</ui:define>
                      <h:inputText id="pTo" valueChangeListener="#{WRMaintenance.pnToValueChanged}" size="30" style=" width: 161px;"
                       value="#{WRMaintenance.pToInputValue}">       
                             <a:support event="onchange" ajaxSingle="true" reRender="pTo"/>
                             <f:validateLength maximum="30"/>
                     </h:inputText>
                  </s:decorate>       
               
               </fieldset>
            </rich:panel>
      </a:outputPanel>

       

       

      My richfaces version is  3.3.0GA

       

      Thanks

       

      Shanika

        • 1. Re: Initial focus to h:inputText dissappeares with value
          shanikaweerapperuma

          Has anybody got any nswer to my question?

          • 2. Re: Initial focus to h:inputText dissappeares with value
            ilya_shaikovsky

            you reRender-ing the whole form and it's works just as designed. input DOM element replaced with the new one from server. redesign the updates in order to exclude this input from updated ones or block the user input in somd e way during the request processed an then setup focus using focus attribute after it's completed.

            • 3. Re: Initial focus to h:inputText dissappeares with value
              shanikaweerapperuma

              Hi Ilya,

               

              Thank you for your reply.  How ever I'm still unclear about what you said "you reRender-ing the whole form".

               

              Well If I get your attention back to my code segment, I rerender only the h:inputText  "pFrom" on the "onchange" event. of the same h:inputText component and not the entire form.  Am I not seeing something correct here? Pls help.

               

               

              <s:decorate id="pFromField" template="layout/edit.xhtml">
                              <ui:define name="label">From:</ui:define>
                              <h:inputText id="pFrom" valueChangeListener="#{WRMaintenance.pnFromValueChanged}" size="30" style=" width: 161px;"
                                value="#{WRMaintenance.pFromInputValue}" >       
                                      <a:support event="onchange" ajaxSingle="true" reRender="pFrom"/>
                                      <f:validateLength maximum="30"/>
                              </h:inputText>
                          </s:decorate>
                          <s:decorate id="pToField" template="layout/edit.xhtml">
                              <ui:define name="label">To:</ui:define>
                              <h:inputText id="pTo" valueChangeListener="#{WRMaintenance.pnToValueChanged}" size="30" style=" width: 161px;"
                               value="#{WRMaintenance.pToInputValue}">       
                                     <a:support event="onchange" ajaxSingle="true" reRender="pTo"/>
                                     <f:validateLength maximum="30"/>
                             </h:inputText>
                          </s:decorate>

               

              -shanika

              • 4. Re: Initial focus to h:inputText dissappeares with value
                nbelaevski

                Hi,

                 

                Please try "focus" attribute as Ilya suggested.

                • 5. Re: Initial focus to h:inputText dissappeares with value
                  shanikaweerapperuma

                  Hi Nick,

                   

                  Thanks for your reply.

                   

                  I tried the focus attribute in the following manner but the problem remains.

                   

                  <s:decorate id="pFromField" template="layout/edit.xhtml">
                                  <ui:define name="label">From:</ui:define>
                                  <h:inputText id="pFrom" valueChangeListener="#{WRMaintenance.pnFromValueChanged}" size="30" style=" width: 161px;"
                                    value="#{WRMaintenance.pFromInputValue}" >       
                                          <a:support event="onchange" ajaxSingle="true" reRender="pFrom" focus="pTo"/>
                                          <f:validateLength maximum="30"/>
                                  </h:inputText>
                              </s:decorate>
                              <s:decorate id="pToField" template="layout/edit.xhtml">
                                  <ui:define name="label">To:</ui:define>
                                  <h:inputText id="pTo" valueChangeListener="#{WRMaintenance.pnToValueChanged}" size="30" style=" width: 161px;"
                                   value="#{WRMaintenance.pToInputValue}">       
                                         <a:support event="onchange" ajaxSingle="true" reRender="pTo"/>
                                         <f:validateLength maximum="30"/>
                                 </h:inputText>
                              </s:decorate>

                   

                  I tried only having the focus attribute without the reRender attribute as well. But still the same. Please help me to get around with this issue.

                   

                  -Shanika