+ Start a Discussion
Long Nguyen 19Long Nguyen 19 

Pass list of Object to table in javascript

Hi Expert,

I'm writing searching function in javascript which allows to search accounts and display them to VF page by using apex:pageBlockTable
I use sforce.connection to query data. I get a list of accounts but i dont know how to pass them to apex:pageBlockTable. Please suggest how to this.
My code is below:
if(search != null) {
                sforce.connection.sessionId = '{!$Api.Session_ID}';
                try{ 
                    var query = "find \{" + search + "\}" + " in all fields RETURNING Account (id, name, billingstreet, billingcity, billingpostalcode)"; 
                    var result = sforce.connection.search(query); 
                    if (result) {
                    	var records = result.getArray("searchRecords");   
                        for (var i=0; i<records.length; i++) {
                           var record = records[i].record;
                         //need to pass value to apex table here

                         }
                                              
                    }
                }  
                catch(e) { 
                    alert('An Error has Occured. Error:' +e); 
                }
            }
Code for displaying account information in VF page:
 
<apex:pageBlockSection columns="1" id="pbs">
                            <apex:pageBlockTable value="{!accounts}" var="account" id="pbt">
                                <apex:column headerValue="Name">
                                    <apex:outputLink value="#" onclick="fillIn('{!account.Name}', '{!account.id}');closeWindow();">{!account.Name}</apex:outputLink>
                                </apex:column>
                                
                                <apex:column headerValue="City" value="{!account.BillingCity}"/>
                                <apex:column headerValue="Street" value="{!account.BillingStreet}"/>
                                <apex:column headerValue="Postcode" value="{!account.BillingPostalCode}"/>
                            </apex:pageBlockTable>
                    	</apex:pageBlockSection>




 
SantoshChitalkarSantoshChitalkar
Hi,

Refer this one 

http://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/

Regards,
Santosh Chitalkar
Rahul SharmaRahul Sharma
It would be much simpler to perform the search logic inside a controller than JavaScript.
Refer to Jeff's blog, its a great example!
Krishna SambarajuKrishna Sambaraju
What is the reason for using javascript for searching the records? It is much easier to do it from the controler.
Krishna SambarajuKrishna Sambaraju
Hi Long,

You need to create a inner class in your controller and deserialize the json generated in the javascript and use the custom class list in the page block table. 

Modify your javascript function as below.

            for (var i = 0; i < records.length; i++)
            {
                if (i==0)
                {
                    allRecords = JSON.stringify(records[i].record);
                }
                else
                {
                    allRecords = allRecords + "," + JSON.stringify(records[i].record);
                }
            }
            allRecords = "[" + allRecords + "]";
            DeserializeAccounts(allRecords);
        }
    </script>

Change page block table as below:

             <apex:outputPanel id="jsonPanel">
                 <apex:pageBlockTable value="{!accWrapperList}" var="acc">
                     <apex:column headerValue="Account Id" value="{!acc.Id}"/>
                     <apex:column headerValue="Account Id" value="{!acc.Name}"/>
                 </apex:pageBlockTable>
             </apex:outputPanel>   


Controller:
Add an inner class as below in your controller to deserialize the json
    public string jsonString {get; set;}
    public List<AccountWrapper> accWrapperList {get; set;}
    public AccountSearchPageController() // change it to your controller name.
    {
       accWrapperList = new List<AccountWrapper>();
    }
    public PageReference DeserializeAccounts()
    {
        accWrapperList = (List<AccountWrapper>)System.JSON.deserialize(jsonString, List<AccountWrapper>.class);
        return null;
    }
    public class AccountWrapper{
        public string Id {get;set;}
        public string Name {get; set;}
    }

Hope this works for you.

Regards,
Krishna.
Krishna SambarajuKrishna Sambaraju
You also need to add an actionFunction in VF Page to execute the controller method and render the outputPanel as shown below.
<apex:actionFunction name="DeserializeAccounts" action="{!DeserializeAccounts}" reRender="jsonPanel">
            <apex:param name="jsonParam" assignTo="{!jsonString}" value=""/>
        </apex:actionFunction>