Return list of records from Salesforce Object with JavaScript

Question

How could I return a list of records using only javascript, with no apex: elements.

My original approach was to use an apex:repeat like so:

   <apex:repeat value="{!attachments}" var="attach">               
         //STUFF
   </apex:repeat>

In conjunction with a method in my controller.

But because the DOM of my page is created on the fly with jQuery, using apex elements won't really work.

Would anyone have any suggestions as to how I could return a list of records from one object with javascript and / or jQuery?

Answer 1

The easiest way I've found is to make use of the AJAX Toolkit and the sforce.connection.query method (remember to change the actual query to what you're after).

<script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
</script>

<script src="../../soap/ajax/30.0/connection.js" type="text/javascript"></script>

<script type="text/javascript">
    function doQuery
    {
        sforce.connection.query
        (
            "Select Id, Name, Industry From Account order by Industry",
            {
                onSuccess: onSuccess,
                onFailure: onFailure,
                source: { //state that you need when the callback is called }
            }
        );
    }

    function onSuccess(result, source) 
    {
        var records = result.getArray("records");

        for (var i = 0; i < records.length; i++) 
        {
            var record = records[i];
            log(record.Name + " -- " + record.Id);
        }
    }    

    function onFailure(error, source) 
    {
        // Handle failure
    }
</script>

This is a cut down version of the sample here.

Answer 2

Another recommended route is to use Javascript Remoting for Visualforce. One of the advantages of JS remoting over the AJAX Toolkit is the ability to setup and control your logic of what is returned in apex. Here is a stubbed out example:

function getAttachments() {

    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.findAttachments}', 
        [ARGUMENTS], 
        function(result, event){
            if (event.status) {
                //success, do what you need to do with jQuery
            } else {
                //handle errors
            }
        }, 
        {escape: true}
    );
}

You would also need a corresponding controller and @RemoteAction method

@RemoteAction
global static List<Attachment> findAttachments() { ... }