4 Replies Latest reply on Dec 11, 2008 4:47 PM by Dean Hiller

    table DataModel, inputText, and AJAX examples?

    Dean Hiller Expert

      Does anyone have an example with a dataTable that has inputText fields that need to be filled in where you can add rows with an add button and delete with a remove button all done in ajax.


      We have been trying to get this to work for two days now and if my remove button has ajaxSingle=false, it works great except that validation fails on not filled in rows and so click remove does not work until I fill in all the fields(even when trying to remove an empty field..you have to fill it in before you can click remove).


      Then if I use ajaxSingle=true, I can remove any row, but it does not read back from the dataModel properly.  If I have row a, b, c, d, and I click remove b, it changes to a, b, d.  then if I click refresh, it display a, c, d and shows that b was correctly deleted but the framework did not read properly from the model for some reason. 


      It has something to do with the html we suspect but can't figure it out......(is there any way to have ajaxSingle=false but skip validations on a submit?)....



      <s:div id="variables">
      
           <s:div rendered="#{variables.size==0}">
                Currently, this question has no input fields.<br/>
                Please click Add an Input Field to add one.
           </s:div>
           <h:dataTable id="variablesTable" border="1" value="#{variables}"
                     var="field" rendered="#{variables.size>0}">                                        
                <h:column>
                     <f:facet name="header">Label</f:facet>
                     <s:decorate id="labelDecorate" template="fieldTemplate.xhtml">
                          <h:inputText id="label" value="#{field.label}" required="true">
                      </h:inputText>                                             
                  </s:decorate>
                </h:column>
                <h:column>
                     <f:facet name="header">Stored as</f:facet>
                     <s:decorate id="nameDecorate" template="fieldTemplate.xhtml">
                          <h:inputText id="name" value="#{field.name}" required="true">
                          </h:inputText>                                   
                     </s:decorate>
                </h:column>
                <h:column>
                     <f:facet name="header">Actions</f:facet>
                     <a:commandLink id="removeField" value="Remove"
                     action="#{editScript.removeVariable(field)}" reRender="variables" 
                     
                      />
                </h:column>
           </h:dataTable>     
      </s:div>
      
      
      <a:commandButton id="addField" value="Add an Input Field"
           action="#{editScript.addVariable()}" reRender="variables" 
           ajaxSingle="true" bypassUpdates="false" />
      
      </a:region>