6 Replies Latest reply: Aug 30, 2013 1:17 AM by Frank Nimphius-Oracle RSS

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

    b6989e18-03d3-4f46-a74e-f260b7a788a9

      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"

        • 1. Re: Access af:table values from JavaScript array (for google maps task)
          Michael Shapira

          This is probably can be done with relatevly small efford by using client and server listeners, but if you want to go simple you get just modify on load finction (the one in the blog you posted). Check the view source of your page to see that is the id generated for table (or table rows). After this in javascript use getElementById or getElementsByTagName to loop over elements that holds lat. and long. values and store it into array.


          • 2. Re: Access af:table values from JavaScript array (for google maps task)
            b6989e18-03d3-4f46-a74e-f260b7a788a9

            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???

            • 3. Re: Access af:table values from JavaScript array (for google maps task)
              kdario

              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???

              With javascript you can manipulate only with currently fetched rows.

               

              Use managed bean to construct javascript array, for example:

              String jsArray = "[";
              RowSetIterator rs = yourIterator.getViewObject().createRowSetIterator(null);
              while (rs.hasNext()){
              Row r = rs.next();
              jsArray += ...
              }
              rs.closeRowSetIterator();
              jsArray += "]";
              
              

               

              And then invoke javascript function with:

              FacesContext fctx = FacesContext.getCurrentInstance();
              ExtendedRenderKitService erks = Service.getRenderKitService(fctx, ExtendedRenderKitService.class);
              String js = "yourFunc(" + jstArray + ");";
              erks.addScript(fctx, js);
              
              

               

              Dario

              • 5. Re: Access af:table values from JavaScript array (for google maps task)
                Michael Shapira

                Dario told you exactly how to do it.

                Looping through VO will allow you to collect all the rows and not only 50.

                Also set in VO definition in the "HINT" area "ALL_ROWS"

                • 6. Re: Access af:table values from JavaScript array (for google maps task)
                  Frank Nimphius-Oracle

                  ... and Dario also gave you best practices, which is to create a second RowSet iterator ;-) As a developer you should be able to take it home from here

                   

                  Frank