What should I put into the Set ajaxKeys?

[twf]

Hi, every one.

I want to partially refresh the changed rows of a dataTable.
I got some truble about the "ajaxKeys".
Will someone give me a example of the using of <a4j:repeat> ?
Thanks a lot.

Here is my code. The dataTable in my code didn't rerendered.

<f:view>
 <x:saveState value="#{fishSalesBean}"></x:saveState>
 <h:form id="form">
 <h:panelGrid columns="5" columnClasses="first, first, first, first, first">
 <h:outputText value="select"></h:outputText>
 <h:outputText value="name"/>
 <h:outputText value="picture"/>
 <h:outputText value="price"/>
 <h:outputText value="quantity"/>
 <a4j:repeat id="dataTable" value="#{fishSalesBean.fishes}" var="fish" rowKeyVar="index"
 ajaxKeys="#{fishSalesBean.ajaxKeys}" binding="#{fishSalesBean.repeater }">
 <f:facet name="header">
 <x:selectManyCheckbox id="checkboxes" layout="spread" value="#{fishSalesBean.selected}">
 <f:selectItems value="#{fishSalesBean.items}" />
 </x:selectManyCheckbox>
 </f:facet>
 <f:verbatim><tr></f:verbatim>
 <f:verbatim><td></f:verbatim>
 <x:checkbox index="#{index}" for="checkboxes"></x:checkbox>
 <f:verbatim></td></f:verbatim>
 <f:verbatim><td></f:verbatim>
 <h:outputText value="#{fish.name}" />
 <f:verbatim></td></f:verbatim>
 <f:verbatim><td></f:verbatim>
 <h:graphicImage value="#{fish.picUrl }" />
 <f:verbatim></td></f:verbatim>
 <f:verbatim><td></f:verbatim>
 <h:outputText value="#{fish.price}" />
 <f:verbatim></td></f:verbatim>
 <f:verbatim><td></f:verbatim>
 <h:outputText id="quantity" value="#{fish.quantity}" />
 <f:verbatim></td></f:verbatim>
 <f:verbatim></tr></f:verbatim>
 </a4j:repeat>
 <a4j:commandButton value="Buy selected (ajax)" oncomplete="resetStatus();" reRender="quantity"
 action="#{fishSalesBean.sellFishes}"></a4j:commandButton>
 <h:commandButton value="Buy selected" action="#{fishSalesBean.sellFishes}"></h:commandButton>
 </h:panelGrid>
 </h:form>
 </f:view>

[twf]

I've tried put the rowIndexes into it , but it doesn't work.

[ilya_shaikovsky]

why do you think that ajax keys influence initial rendering.

and where you table and tbody tags around the a4j:repeat if you build table?

[twf]

Hi, thank you for your reply.
I was using the JSF <h:panelGrid > tag to form a table.
That's not the problem.
I had got the table.

But now I want to partially refresh the table.
So I tried to test like this:
When a row is selected, I put the rowIndex of that row into the ajaxKeys set. And, for test, when the first row is selected, I also change the third row of the table in my backing bean's action method. I hope that, when the time only the first row is selected, the change of the third row won't be show immediately after a ajaxrequest, for I want to just refresh the selected rows.
But I got this, the entire table is refreshed.
Now I changed my page code:

<rich:dataTable id="dataTable" value="#{fishSalesBean.fishes}" binding="#{fishSalesBean.richTable}" var="fish" rowKeyVar="index"
 width="800" columnClasses="first, first, first, first, first">
 <f:facet name="header">
 <x:selectManyCheckbox id="checkboxes" layout="spread" value="#{fishSalesBean.selected}">
 <f:selectItems value="#{fishSalesBean.items}" />
 </x:selectManyCheckbox>
 </f:facet>
 <h:column>
 <f:facet name="header">
 <h:outputText value="selects"></h:outputText>
 </f:facet>
 <x:checkbox index="#{index}" for="checkboxes"></x:checkbox>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="nick name of fish"/>
 </f:facet>
 <h:outputText value="#{fish.name}" />
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="picture"/>
 </f:facet>
 <h:graphicImage value="#{fish.picUrl }" />
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="price"/>
 </f:facet>
 <h:outputText value="#{fish.price}"></h:outputText>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="quantity"/>
 </f:facet>
 <h:outputText value="#{fish.quantity}"></h:outputText>
 </h:column>
 </rich:dataTable>
 <a4j:commandButton value="Buy the selected" oncomplete="resetStatus();" reRender="dataTable"
 action="#{fishSalesBean.sellFishes}"></a4j:commandButton>
 <a4j:log hotkey="M"/>

And here is my bean:

public class FishSalesBean{
 private List fishes;
 private List selected;
 private List items;
 private Set ajaxKeys;
 private UIData dataTable;

 /*
 * Constructor
 */
 public FishSalesBean()
 {
 selected= new ArrayList();

 }

 public List getFishes()
 {
 return fishes;
 }

 public void setFishes(List fishes)
 {
 this.fishes = fishes;
 }

 public void sellFishes()
 { Fish fish;
 for (Iterator it = selected.iterator(); it.hasNext(); )
 {
 fish = (Fish) fishes.get(Integer.parseInt(it.next().toString()));
 if (fish.getQuantity() > 0)
 {
 fish.setQuantity(fish.getQuantity()-1);
 /**
 * If the first row is selected , change the third row too.
 */
 if (fish.getName().equals("Alice"))
 {
 Fish charlie = (Fish) fishes.get(2);
 charlie.setQuantity(charlie.getQuantity()-2);
 if (charlie.getQuantity() < 0)
 charlie.setQuantity(0);
 }
 }
 }
 }

 public List getSelected()
 {
 return selected;
 }

 public void setSelected(List selected)
 {
 this.selected = selected;
 }

 public Set getAjaxKeys()
 {
 ajaxKeys= new HashSet();
 for (Iterator it=selected.iterator(); it.hasNext(); )
 {
 ajaxKeys.add(new Integer((String)it.next()));
 }
 return ajaxKeys;
 }
 public List getItems()
 { if (items != null) return items;
 int i;
 items = new ArrayList();
 for (i = 0; i < fishes.size(); i++)
 items.add(new SelectItem(Integer.toString(i)));
 return items;
 }
 public void setItems(List items)
 {
 this.items = items;
 }

 public UIDataTable getRichTable()
 {
 return richTable;
 }
 public void setRichTable(UIDataTable richTable)
 {
 this.richTable = richTable;
 }

}

[twf]

And here is what i got from the log.
Could you please give me some suggestion?
It will be pretty good if there is a example this condition.
Thank you very much.

debug[15:49:38,406]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: click
debug[15:49:38,468]: NEW AJAX REQUEST !!! with form :form
debug[15:49:38,515]: Form have onsubmit function, call it
debug[15:49:38,531]: Append hidden control form_SUBMIT with value [1] and value attribute [1]
debug[15:49:38,578]: Append hidden control autoScroll with value [] and value attribute []
debug[15:49:38,593]: parameter form:_id18 with value form:_id18
debug[15:49:38,625]: Start XmlHttpRequest
debug[15:49:38,640]: Reqest state : 1
debug[15:49:38,671]: QueryString: AJAXREQUEST=_viewRoot&form%3AdataTable%3A0%3Acheckboxes=0&form_SUBMIT=1&autoScroll=&form%3A_id18=form%3A_id18&
debug[15:49:38,687]: Reqest state : 1
debug[15:49:38,750]: Reqest state : 2
debug[15:49:38,765]: Reqest state : 3
debug[15:49:38,781]: Reqest state : 4
debug[15:49:38,796]: Reqest end with state 4
debug[15:49:38,812]: Response with content-type: text/xml;charset=UTF-8
debug[15:49:38,843]: Full response content: <?xml version="1.0"?>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link type="text/css" rel="stylesheet" href="/examapp/a4j_3_1_0css/table.xcss/DATB/eAFjlbr0AAAC6gHS.jsf" /><script type="text/javascript" src="/examapp/a4j_3_1_0org.ajax4jsf.javascript.AjaxScript.jsf">
</script></head><body><table class="dr-table rich-table" id="form:dataTable" border="0" cellpadding="0" cellspacing="0" width="800"><colgroup span="5"></colgroup><thead><tr class="dr-table-header rich-table-header"><td class="dr-table-headercell rich-table-headercell" colspan="5" scope="colgroup"></td></tr><tr class="dr-table-subheader rich-table-subheader"><td class="dr-table-subheadercell rich-table-subheadercell" scope="col">选择</td><td class="dr-table-subheadercell rich-table-subheadercell" scope="col">å��å—</td><td class="dr-table-subheadercell rich-table-subheadercell" scope="col">图片</td><td class="dr-table-subheadercell rich-table-subheadercell" scope="col">ä»·æ ¼</td><td class="dr-table-subheadercell rich-table-subheadercell" scope="col">剩余库å˜</td></tr></thead><tbody><tr class="dr-table-firstrow rich-table-firstrow"><td id="form:dataTable:0:_id3" class="dr-table-cell rich-table-cell first"><input type="checkbox" name="form:dataTable:0:checkboxes" id="form:dataTable:0:checkboxes" checked="checked" value="0" />&#160;0</td><td id="form:dataTable:0:_id6" class="dr-table-cell rich-table-cell first">Alice</td><td id="form:dataTable:0:_id9" class="dr-table-cell rich-table-cell first"><img src="images/Alice.jpg" /></td><td id="form:dataTable:0:_id12" class="dr-table-cell rich-table-cell first">140</td><td id="form:dataTable:0:_id15" class="dr-table-cell rich-table-cell first">17</td></tr><tr class="dr-table-firstrow rich-table-firstrow"><td id="form:dataTable:1:_id3" class="dr-table-cell rich-table-cell first"><input type="checkbox" name="form:dataTable:0:checkboxes" id="form:dataTable:0:checkboxes" value="1" />&#160;1</td><td id="form:dataTable:1:_id6" class="dr-table-cell rich-table-cell first">Bob</td><td id="form:dataTable:1:_id9" class="dr-table-cell rich-table-cell first"><img src="images/Bob.jpg" /></td><td id="form:dataTable:1:_id12" class="dr-table-cell rich-table-cell first">100</td><td id="form:dataTable:1:_id15" class="dr-table-cell rich-table-cell first">28</td></tr><tr class="dr-table-firstrow rich-table-firstrow"><td id="form:dataTable:2:_id3" class="dr-table-cell rich-table-cell first"><input type="checkbox" name="form:dataTable:0:checkboxes" id="form:dataTable:0:checkboxes" value="2" />&#160;2</td><td id="form:dataTable:2:_id6" class="dr-table-cell rich-table-cell first">Charlie</td><td id="form:dataTable:2:_id9" class="dr-table-cell rich-table-cell first"><img src="images/Charlie.jpg" /></td><td id="form:dataTable:2:_id12" class="dr-table-cell rich-table-cell first">180</td><td id="form:dataTable:2:_id15" class="dr-table-cell rich-table-cell first">54</td></tr></tbody></table><meta name="Ajax-Update-Ids" content="form:dataTable" /><span id="ajax-view-state"></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /><span id="org.ajax4jsf.oncomplete">resetStatus();</span><script type="text/javascript">//<![CDATA[
function getScrolling() { var x = 0; var y = 0; if (self.pageXOffset) {
 x = self.pageXOffset; y = self.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollLeft) {
 x = document.documentElement.scrollLeft;
 y = document.documentElement.scrollTop; } else if (document.body) {
 x = document.body.scrollLeft; y = document.body.scrollTop; }
 return x + "," + y;}////]]>
</script><a id="hiddenReloadLink" name="hiddenReloadLink" href="/examapp/test/fishSales.jsf?1207208978734" style="display:none"></a> <div style="display:none"><input id="checkSubmitFlg" name="checkSubmitFlg" value="0" style="display:none" /></div><script type="text/javascript">//<![CDATA[
if(window.parent.document.getElementById("checkSubmitFlg")!=null){
window.parent.document.getElementById("checkSubmitFlg").value="0"; }
window.status="";////]]></script><script type="text/javascript">//<![CDATA[
function submitTest() {
var checkSubmitFlg = document.getElementById("checkSubmitFlg").value;
if (checkSubmitFlg == '1') {
 alert("\u540e\u53f0\u6570\u636e\u5904\u7406\u4e2d\uff0c\u8bf7\u60a8\u7a0d\u7b49\u2026\u2026\u2026\u2026");
 return false; }
 document.getElementById("checkSubmitFlg").value="1";
window.status="\u4e1a\u52a1\u5904\u7406\u4e2d\u2026\u2026\u2026\u2026";
 return true; }////]]></script></body></html>
debug[15:49:39,015]: Header Ajax-Expired not found, search in <meta>
debug[15:49:39,078]: search for elements by name 'meta' in element #document
debug[15:49:39,109]: selectNodes found 2
debug[15:49:39,125]: Find <meta name='Ajax-Update-Ids' content='form:dataTable'>
debug[15:49:39,140]: Find <meta name='Ajax-Response' content='true'>
debug[15:49:39,171]: Header Ajax-Update-Ids not found, search in <meta>
debug[15:49:39,187]: search for elements by name 'meta' in element #document
debug[15:49:39,265]: selectNodes found 2
debug[15:49:39,281]: Find <meta name='Ajax-Update-Ids' content='form:dataTable'>
debug[15:49:39,296]: Update page by list of rendered areas from response form:dataTable
debug[15:49:39,343]: search for elements by name 'script' in element #document
debug[15:49:39,359]: selectNodes found 4
debug[15:49:39,375]: <script> in response with src=/examapp/a4j_3_1_0org.ajax4jsf.javascript.AjaxScript.jsf
debug[15:49:39,390]: Such element exist in document
debug[15:49:39,421]: search for elements by name 'link' in element #document
debug[15:49:39,500]: selectNodes found 1
debug[15:49:39,515]: <link> in response with src=/examapp/a4j_3_1_0css/table.xcss/DATB/eAFjlbr0AAAC6gHS.jsf
debug[15:49:39,531]: Such element exist in document
debug[15:49:39,546]: Attempt to update part of page for Id: form:dataTable
debug[15:49:39,562]: call selectSingleNode for id= form:dataTable
debug[15:49:39,578]: Replace content of node by outerHTML()
error[15:49:39,593]: Error to clear node content by innerHTML
debug[15:49:39,625]: search for elements by name 'script' in element table
debug[15:49:39,640]: selectNodes found 0
debug[15:49:39,656]: Scripts in updated part count : 0
debug[15:49:39,687]: Update part of page for Id: form:dataTable successful
debug[15:49:39,734]: call selectSingleNode for id= ajax-view-state
debug[15:49:39,750]: Hidden JSF state fields:
debug[15:49:39,765]: Namespace for hidden view-state input fields is undefined
debug[15:49:39,796]: search for elements by name 'input' in element span
debug[15:49:39,859]: selectNodes found 0
debug[15:49:39,859]: Replace value for inputs: 7 by new values: 0
debug[15:49:39,937]: search for elements by name 'INPUT' in element span
debug[15:49:39,953]: selectNodes found 0
debug[15:49:39,953]: Replace value for inputs: 7 by new values: 0
debug[15:49:39,984]: call selectSingleNode for id= _A4J.AJAX.focus
debug[15:49:39,984]: No focus information in response
debug[15:49:40,000]: call selectSingleNode for id= org.ajax4jsf.oncomplete
debug[15:49:40,015]: Call request oncomplete function after processing updates
debug[15:49:40,109]: call selectSingleNode for id= _ajax:data

[ilya_shaikovsky]

So you put table id in reRender and the table rendered all. Works as designed. put id's of cell elements to reRender. And the elements will be updated in rows from ajaxKeys set

check our livedemo a4j:repeat example. There such update designed.