3 Replies Latest reply on Apr 1, 2008 1:10 PM by sergeysmirnov

    problem with input fields inside table

      I recently posted a question on the seam forums for an issue that I am having but haven't had any response. Perhaps there is a solution within richfaces for this...

      Basically I want to use ajax to add/remove rows from a table that contains input fields. I have used an ajax panel and ajax command link to achieve this.

      The problem is that by default the validation kicks in (required is set to true on the input fields) preventing the row from being added/removed until the user has populated all input fields in the table. This doesn't make sense, particularly if you add then want to remove a row :(.

      In theory immediate=true should do the job, but I lose the values from the input fields inside the table when adding/removing rows.

      here's a link to the original post with more details:
      http://www.seamframework.org/Community/InputFieldsLoseValueInTableUsingImmediatetrue

        • 1. Re: problem with input fields inside table
          fabmars

          Use <a4j:commandButton/> or <a4j:commandLink/> WITH the attribute ajaxSingle="true"

          Also you should read this:
          http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.html

          • 2. Re: problem with input fields inside table

            Thanks for the suggestion and link to article Fabien.

            Unfortunately ajaxSingle="true" on the commandLinks doesn't work - I still lose the values from the input fields. This is what I did:

            <a:outputPanel id="questionPanel">
             <h:dataTable value="#{questionnaire.questions}" var="question">
             <h:column>
             <f:facet name="header">Question Text</f:facet>
             <h:inputText id="description" value="#{question.description}" required="true"/>
             </h:column>
             <h:column>
             <a:commandLink value="delete" reRender="questionPanel" action="#{questionnaire.removeQuestion(question)}" ajaxSingle="true" />
             </h:column>
             </h:dataTable>
            </a:outputPanel>
            
            <a:commandButton value="add a question" reRender="questionPanel" action="#{questionnaireController.removeQuestion(question)}" ajaxSingle="true" />
            
            <h:commandButton value="save" action="#{questionnaireController.save}"/>


            Any have also tried using <a4j:region> around the links but of course this just results in the input fields being ignored during processing and then lost during the reRender.

            Any other suggestions anyone? I only other option I have is to take the user to a new page to add/edit/remove records from the table. I really want to avoid this as it's a bit old school and I'd prefer to be able to edit in place without navigating to new pages.

            Thanks

            • 3. Re: problem with input fields inside table

              In you case, the ajaxSingle works exactly like it should. I.e. the a:commandLink is processed while the other components (h:inputText in your case) is bypassed