Display javascript result in a pageblocktable

Question

I am making a Ajax call to a REST API and parsing the response and maintaining the parsed values in a delimited string. I want to display the same string in the pageblocktable without taking the control to the controller. I want everything to be in Javascript.

VFPage:

JS:

function()
{
$.ajax(
{
     url : weblink,
     success : function(result)
     {
         var resultData = result.content.resultData[i]
         //assume resultData is a delimited string
document.getElementById('pgad1:frm:ADValues').value = resultData ;
     }
}
}

PageBlockTable:

<apex:inputHidden value="{!ADAddrList}" id="ADValues"/>
<td width="50%" valign="top">
            <apex:pageBlock mode="maindetail" id="addresspb">
                <apex:pageBlockTable value="{!AddrLst}" var="r" id="records" rendered="{!NOT(ISNULL(AddrLst))}">
                    <apex:column >
                        <input type="radio" name="SelectAddress" value="{!r.fulladdress}" onclick="changeValue(this, '{!$Component.RadioButtonValue}');" /> 
                    </apex:column>
                    <apex:column headerValue="City" Value="{!r.locality}" />
                    <apex:column headerValue="State/Province" Value="{!r.province}" />
                    <apex:column headerValue="Zip Code/Postal Code" Value="{!r.postcd}" />
                </apex:pageBlockTable>     
            </apex:pageBlock>
            <apex:actionFunction name="SelectedAddress" action="{!SelectedAddress}" rerender="Address" status="myStatus"/>
            <apex:inputHidden value="{!AddrSelectedValue}" id="RadioButtonValue" /> 
            <apex:actionFunction name="Validate" action="{!Validate}" rerender="Address,addresspb" status="myStatus"/>
        </td>

At present I am passing the string to controller using actionfunction and then displaying it on the page. But, I want to know how can we display the string in the pageblocktable without calling the controller.

Please help!

Thanks, Prashant

Answer 1

Here's an example to manipulate. But I would recommend assembling this on the server-side over mocking it in JS by hand. You could combine JS Remoting, Dynamic Components and Page.getContent

<apex:page>
  <apex:pageBlock title="Localities">
    <script>
      var headers = ['Locality', 'Country', 'Province'];

      var data = [
        ['Warrawee', 'Australia', 'New South Wales'],
        ['Sheffield', 'United Kingdom', 'Yorkshire'],
        ['Anderlecht', 'Belgium', 'The French Part']
      ];

      /**
       * Convert 1D array to table cells
       * @return {HTMLTableRowElement}
       */
      Array.prototype.toTrTd = function() {
        var tr = document.createElement('tr');
        tr.className = 'dataRow';
        this.map(function(item) {
          var td = document.createElement('td');
          td.appendChild(document.createTextNode(item));
          tr.appendChild(td);
        });
        return tr;
      };

      /**
       * Convert 1D array to table headers
       * @return {HTMLTableRowElement}
       */
      Array.prototype.toTrTh = function() {
        var tr = document.createElement('tr');
        tr.className = 'headerRow';
        this.map(function(item) {
          var th = document.createElement('th');
          th.appendChild(document.createTextNode(item));
          tr.appendChild(th);
        });
        return tr;
      };

      /**
       * Convert 2D array to page block table
       * @param {String[]} headers
       * @return {HTMLTableElement}
       */
      Array.prototype.toPbTable = function(headers) {
        var table = document.createElement('table');
        table.border = 0;
        table.cellSpacing = 0;
        table.cellPadding = 0;
        table.className = 'list';

        //table headers
        table.appendChild(headers.toTrTh());

        //table rows
        this.map(function(item) {
        var tr = item.toTrTd();
          table.appendChild(tr);
        });

        return table;
      };

      var table = data.toPbTable(headers);
      document.write(table.outerHTML);
    </script>
  </apex:pageBlock>
</apex:page>