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

[fezen]

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.

[ilya_shaikovsky]

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

[fezen]

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>

[fezen]

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.

[fezen]

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

[ilya_shaikovsky]

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.

[fezen]

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!

[fezen]

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. :)