Access af:table values from JavaScript array (for google maps task)

Question

Hi!
I have JSP page with af:table where latitude and longitude for google maps are stored. I am using these tutorial [https://blogs.oracle.com/middleware/entry/integrating_google_maps_with_adf] and I know how to access latitude and longitude from output text (for one point). Now i need to do something similar with loop for all table rows. How can I achieve this?
I have JavaScript code which uses Google Maps API and can display many points on one map. Also I have longitude and latitude data in af:table (bindings), each table row has one point. My task is to take data from af:table and pass it to JavaScript.
May be it is better to use managed bean as you said. Firstly I will access binding data from managed bean. Then I have to pass this data to JavaScript method? Can you suggest some example? I have "Using JavaScript in ADF Faces Rich Client Applications"

Answer 1

My table is there :
<af:table value="#{bindings.LocView1.collectionModel}" var="row"
                              rows="#{bindings.LocView1.rangeSize}"
                              emptyText="#{bindings.LocView1.viewable ? 'No data to display.' : 'Access Denied.'}"
                              fetchSize="#{bindings.LocView1.rangeSize}" rowBandingInterval="0"
                              filterModel="#{bindings.LocView1Query.queryDescriptor}"
                              queryListener="#{bindings.LocView1Query.processQuery}" filterVisible="true" varStatus="vs"
                              selectedRowKeys="#{bindings.LocView1.collectionModel.selectedRow}"
                              selectionListener="#{bindings.LocView1.collectionModel.makeCurrent}" rowSelection="single"
                              id="t1">
                        <af:column sortProperty="#{bindings.LocView1.hints.SoffOffCode.name}" filterable="true"
                                   sortable="true" headerText="#{bindings.LocView1.hints.SoffOffCode.label}" id="c1">
                            <af:outputText value="#{row.SoffOffCode}" clientComponent="true" id="ot1"/>
                        </af:column>
                        <af:column sortProperty="#{bindings.LocView1.hints.SoffCode.name}" filterable="true"
                                   sortable="true" headerText="#{bindings.LocView1.hints.SoffCode.label}" id="c2">
                            <af:outputText value="#{row.SoffCode}" id="ot2"/>
                        </af:column>
                        <af:column sortProperty="#{bindings.LocView1.hints.SoffLat.name}" filterable="true"
                                   sortable="true" headerText="#{bindings.LocView1.hints.SoffLat.label}" id="c3">
                            <af:outputText value="#{row.SoffLat}" clientComponent="true" id="ot3"/>
                        </af:column>
                        <af:column clientComponent="true" sortProperty="#{bindings.LocView1.hints.SoffLng.name}" filterable="true"
                                   sortable="true" headerText="#{bindings.LocView1.hints.SoffLng.label}" id="c4">
                            <af:outputText value="#{row.SoffLng}" clientComponent="true" id="ot4"/>
                        </af:column>
                        <af:column sortProperty="#{bindings.LocView1.hints.SoffZoom.name}" filterable="true"
                                   sortable="true" headerText="#{bindings.LocView1.hints.SoffZoom.label}" id="c5">
                            <af:outputText value="#{row.SoffZoom}" id="ot5"/>
                        </af:column>
                    </af:table>
Javascript code:
alert(document.getElementById("t1"));
Result:
[object HTMLDivElement];
And
alert(document.getElementById("t1").innerHTML);
Result:
<div id="t1::ch" style="overflow: hidden; position: relative; width: 366px;" _afrcolcount="5" class="xzg"><table class="xzi" summary="This table contains column headers corresponding to the data body table below" id="t1::ch::t" style="position:relative;table-layout:fixed;width:525px" cellspacing="0"><tbody><tr><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th></tr><tr><th _d_index="0" _afrfiltercol="true" class="xzr" align="left" nowrap="nowrap"><span id="t1:_afrFltrc1" class="x1u"><input id="t1:_afrFltrc1::content" name="t1:_afrFltrc1" class="x25" type="text"></span></th><th _d_index="1" _afrfiltercol="true" class="xzr" align="left" nowrap="nowrap"><span id="t1:_afrFltrc2" class="x1u"><input id="t1:_afrFltrc2::content" name="t1:_afrFltrc2" class="x25" type="text"></span></th><th _d_index="2" _afrfiltercol="true" class="xzr" align="left" nowrap="nowrap"><span id="t1:_afrFltrc3" class="x1u"><input id="t1:_afrFltrc3::content" name="t1:_afrFltrc3" class="x25" type="text"></span></th><th _d_index="3" _afrfiltercol="true" class="xzr" align="left" nowrap="nowrap"><span id="t1:_afrFltrc4" class="x1u"><input id="t1:_afrFltrc4::content" name="t1:_afrFltrc4" class="x25" type="text"></span></th><th _d_index="4" _afrfiltercol="true" class="xzr" align="left" nowrap="nowrap"><span id="t1:_afrFltrc5" class="x1u"><input id="t1:_afrFltrc5::content" name="t1:_afrFltrc5" class="x25" type="text"></span></th></tr><tr><th id="t1:c1" _d_index="0" _afrleaf="true" _afrroot="true" class="xzj" align="left"><div style="position:relative; float:right"><table id="t1:c1::afrSI" _afrhoverable="true" style="display:none" class="x104" cellpadding="0" cellspacing="0"><tbody><tr><td _afrsortasc="1"><a tabindex="-1" class="xzm" title="Sort Ascending"></a></td><td _afrsortdesc="1"><a tabindex="-1" class="xzn" title="Sort Descending"></a></td></tr></tbody></table></div><div class="x19p">SoffOffCode</div></th><th id="t1:c2" _d_index="1" _afrleaf="true" _afrroot="true" class="xzj" align="left"><div style="position:relative; float:right"><table id="t1:c2::afrSI" _afrhoverable="true" style="display:none" class="x104" cellpadding="0" cellspacing="0"><tbody><tr><td _afrsortasc="1"><a tabindex="-1" class="xzm" title="Sort Ascending"></a></td><td _afrsortdesc="1"><a tabindex="-1" class="xzn" title="Sort Descending"></a></td></tr></tbody></table></div><div class="x19p">SoffCode</div></th><th id="t1:c3" _d_index="2" _afrleaf="true" _afrroot="true" class="xzj" align="left"><div style="position:relative; float:right"><table id="t1:c3::afrSI" _afrhoverable="true" style="display:none" class="x104" cellpadding="0" cellspacing="0"><tbody><tr><td _afrsortasc="1"><a tabindex="-1" class="xzm" title="Sort Ascending"></a></td><td _afrsortdesc="1"><a tabindex="-1" class="xzn" title="Sort Descending"></a></td></tr></tbody></table></div><div class="x19p">SoffLat</div></th><th id="t1:c4" _d_index="3" _afrleaf="true" _afrroot="true" class="xzj" align="left"><div style="position:relative; float:right"><table id="t1:c4::afrSI" _afrhoverable="true" style="display:none" class="x104" cellpadding="0" cellspacing="0"><tbody><tr><td _afrsortasc="1"><a tabindex="-1" class="xzm" title="Sort Ascending"></a></td><td _afrsortdesc="1"><a tabindex="-1" class="xzn" title="Sort Descending"></a></td></tr></tbody></table></div><div class="x19p">SoffLng</div></th><th id="t1:c5" _d_index="4" _afrleaf="true" _afrroot="true" class="xzj" align="left"><div style="position:relative; float:right"><table id="t1:c5::afrSI" _afrhoverable="true" style="display:none" class="x104" cellpadding="0" cellspacing="0"><tbody><tr><td _afrsortasc="1"><a tabindex="-1" class="xzm" title="Sort Ascending"></a></td><td _afrsortdesc="1"><a tabindex="-1" class="xzn" title="Sort Descending"></a></td></tr></tbody></table></div><div class="x19p">SoffZoom</div></th></tr></tbody></table></div><div id="t1::db" class="xz9" style="position: relative; width: 366px; overflow: hidden; height: 521px; z-index: 1;" _afrcolcount="5"><table class="xza x102" style="table-layout:fixed;position:relative;width:525px;" _totalwidth="525" _selstate="{'0':true}" _rowcount="179" _startrow="0" cellspacing="0"><tbody><tr _afrrk="0" class="xzy p_AFSelected"><td style="width:100px;" class="xzv" nowrap="nowrap"><span id="t1:0:ot1">26</span></td><td style="width:100px;" class="xzv" nowrap="nowrap">01</td><td style="width:100px;" class="xzv" nowrap="nowrap"><span id="t1:0:ot3">47.90782714384932</span></td><td style="width:100px;" class="xzv" nowrap="nowrap"><span id="t1:0:ot4">106.88643654861448</span></td><td style="width:100px;" class="xzv" nowrap="nowrap">15</td></tr><tr _afrrk="1" class="xzy"><td class="xzv" nowrap="nowrap"><span id="t1:1:ot1">26</span></td><td class="xzv" nowrap="nowrap">02</td><td class="xzv" nowrap="nowrap"><span id="t1:1:ot3">47.91542113773543</span></td><td class="xzv" nowrap="nowrap"><span id="t1:1:ot4">106.88540658035276</span></td><td class="xzv" nowrap="nowrap">15</td></tr><tr _afrrk="2" class="xzy"><td class="xzv" nowrap="nowrap"><span id="t1:2:ot1">26</span></td><td class="xzv" nowrap="nowrap">03</td><td class="xzv" nowrap="nowrap"><span id="t1:2:ot3">47.90768330745696</span></td><td class="xzv" nowrap="nowrap"><span id="t1:2:ot4">106.89544877090452</span></td><td class="xzv" nowrap="nowrap">15</td></tr><tr _afrrk="3" class="xzy"><td class="xzv" nowrap="nowrap"><span id="t1:3:ot1">26</span></td><td class="xzv" nowrap="nowrap">04</td><td class="xzv" nowrap="nowrap"><span id="t1:3:ot3">47.90716549312801</span></td><td class="xzv" nowrap="nowrap"><span id="t1:3:ot4">106.86879834213255</span></td><td class="xzv" nowrap="nowrap">14</td></tr><tr _afrrk="4" class="xzy"><td class="xzv" nowrap="nowrap"><span id="t1:4:ot1">26</span></td><td class="xzv" nowrap="nowrap">05</td><td class="xzv" nowrap="nowrap"><span id="t1:4:ot3">47.89841940184846</span></td><td class="xzv" nowrap="nowrap"><span id="t1:4:ot4">106.82674130477903</span></td><td class="xzv" nowrap="nowrap">13</td></tr><tr _afrrk="5" class="xzy"><td class="xzv" nowrap="nowrap"><span id="t1:5:ot1">26</span></td><td class="xzv" nowrap="nowrap">06</td><td class="xzv
.etc
Javascript:  alert(document.getElementById("t1:121:ot3").innerHTML); this retrieve in value
But only 50 rows in this result. I have many rows. How I can get all???