7 Replies Latest reply on Nov 13, 2008 10:06 AM by Stefan Anderssson

    Toggle one (table)row in <a4j:repeat>

    Stefan Anderssson Newbie

      Hi,

      I'm trying to make one row in a table "editable", but I'm not sure on how to access just one row. This is the relevant code:

      <a4j:keepAlive beanName="testBean" />
      <h:form>
       <a4j:outputPanel id="table">
       <table border="1">
       <a4j:repeat value="#{myBean.dataList}" var="item">
       <tr>
       <td>
       <h:outputText rendered="#{!testBean.formVisible}" value="#{item.name}" />
       <h:inputText rendered="#{testBean.formVisible}" binding="#{testBean.name}" value="#{item.name}" size="7" />
       </td>
       <td>
       <a4j:commandLink rendered="#{!testBean.formVisible}" action="#{testBean.toggleForm}" value="Edit" reRender="table" />
       <a4j:commandLink rendered="#{testBean.formVisible}" action="#{testBean.toggleForm}" value="Done" reRender="table" />
       </td>
       </tr>
       </a4j:repeat>
       </table>
       </a4j:outputPanel>
      </h:form>
      


      TestBean:
       private HtmlInputText name;
       private boolean formVisible = false;
      
       public HtmlInputText getName() {
       return name;
       }
      
       public void setName(HtmlInputText name) {
       this.name = name;
       }
      
       public boolean isFormVisible() {
       return formVisible;
       }
      
       public void setFormVisible(boolean formVisible) {
       this.formVisible = formVisible;
       }
      
       public void toggleForm() {
       if(isFormVisible()) {
       setFormVisible(false);
       }
       else {
       setFormVisible(true);
       }
       }
      
       public void post() {
       System.out.println("do... stuff");
       }
      


      When I click "Edit" and run the toggleForm-method every row in the table displays the input. What I'd like to do is to just display the input for that single row that I clicked on. Is there any easy way of doing that?

      Cheers.

        • 1. Re: Toggle one (table)row in <a4j:repeat>
          Ilya Shaikovsky Master

          try to reRender not the table but the input, output and links inside. Also made the commandLinks ajaxSingle.

          • 2. Re: Toggle one (table)row in <a4j:repeat>
            Stefan Anderssson Newbie

            Thanks for the help. It works like a charm, but just for one row at a time. I wrapped the input/output text in a <a4j:outputPanel> (I suppose the panels are the way to go?), as well as the commandlinks. And, I added ajaxSingle="true" to the command links.

            When I click the "Edit" command link in a row, the input is displayed, and the toggleForm-method runs. The "Done" command-link is displayed and I can "close" the editing with this link.

            However, when I have one row open for "editing" and click another "Edit" link, the toggleForm-method won't run (an ajax-request/update is done though) and the <a4j:outputPanel> for that row are not updated.

            This is what the code looks like now (I'd prefer to have one <a4j:outputPanel>/wrapper for the whole row but I couldn't get that to work well with the layout. There has to be a better way of doing this!?):

            <h:form>
             <a4j:outputPanel id="table">
             <table border="1">
             <a4j:repeat value="#{myBean.dataList}" var="item">
             <tr>
             <td>
             <a4j:outputPanel id="nameRegion">
             <h:outputText rendered="#{!testBean.formVisible}" value="#{item.name}" />
             <h:inputText rendered="#{testBean.formVisible}" binding="#{testBean.name}" value="#{item.name}" size="7" />
             </a4j:outputPanel>
             </td>
             <td>
             <a4j:outputPanel id="linkRegion">
             <a4j:commandLink rendered="#{!testBean.formVisible}" action="#{testBean.toggleForm}" value="Edit" ajaxSingle="true" reRender="nameRegion,linkRegion" />
             <a4j:commandLink rendered="#{testBean.formVisible}" action="#{testBean.toggleForm}" value="Done" ajaxSingle="true" reRender="nameRegion,linkRegion" />
             </a4j:outputPanel>
             </td>
             </tr>
             </a4j:repeat>
             </table>
             </a4j:outputPanel>
            </h:form>
            


            • 3. Re: Toggle one (table)row in <a4j:repeat>
              Stefan Anderssson Newbie

              I saw this in the <a4j:log> now:

              debug[11:52:22,068]: Find
              warn[11:52:22,068]: No information in response about elements to replace

              ... shows up when I click an "Edit" link when one row is already open. Doesn't really help me now though, as I am a bit puzzeled about this.

              • 4. Re: Toggle one (table)row in <a4j:repeat>
                Stefan Anderssson Newbie

                Sorry, it should be, just about:

                debug[11:52:22,068]: Find < meta name='Ajax-Update-Ids' content='' >
                warn[11:52:22,068]: No information in response about elements to replace

                • 5. Re: Toggle one (table)row in <a4j:repeat>
                  Ilya Shaikovsky Master

                  mmm.. sorry seems I missed one of the main points in this question.. b.t.w. your property "visible" should be the property of item and not a single property inside the test bean. In your case it works as expected because you use the same property for all the rows.

                  • 6. Re: Toggle one (table)row in <a4j:repeat>
                    Stefan Anderssson Newbie

                    I have to say that I don't fully get how:
                    private HtmlInputText name;
                    ...seems to be connected to one single row of the <a4j:repeat>, but not the boolean I created.

                    Never the less, I'd prefer to not put the "visible" property in the item-list, since it will just be a list of data. I guess I could do some workarounds for that, but isn't there any easy way of keeping track of the "visibility"/status/etc. for the rows, using the UIRepeat object? I'm playing around with the UIRepeat-object now, but right now I can't even get the row-index. Have to figure that out, for starters.

                    Thanks again!

                    • 7. Re: Toggle one (table)row in <a4j:repeat>
                      Stefan Anderssson Newbie

                      I solved this, in a hacky fashion, by using a HashMap that keeps track of the rows "status". It seems to work well... so far. :)