Using JavaScript Variables for Visualforce Output

Question

I'm new to using JavaScript in Visualforce and have a basic question that I'm finding incredibly hard to locate the answer to:

I've brought data from my controller into a JS variable via JSON.serialize, and I'd like to take a look at what the object looks like when printed out. How do I print out JS variables onto a VF page? My goal is to create a table that outputs a list of contacts after I've applied my business logic to it. What would be the syntax to throw my array into something like an apex:repeat ?

What I've got:

Controller

public with sharing class ContactDynamicSearchController {

    // Instance Variables
    public List<Contact> contacts {get;set;}

    // send query results to page
    public List<Contact> runQuery() {
        return [Select id, firstname, lastname From Contact];
    }

}

VF Page:

<apex:page showHeader="true" sidebar="true" controller="ContactDynamicSearchController">
<script>
    var contactArray = JSON.parse('{! contacts}');
    // How do I print this out for testing?
</script>

<apex:pageBlock >
    <h2>JavaScript version: </h2>
    <h2>APEX Table Version:</h2>
    <apex:pageBlockSection >
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.id }">
                <apex:facet name="header">
                    ID
                </apex:facet>
            </apex:column>
            <apex:column value="{! ct.firstname }">
                <apex:facet name="header">
                    First Name
                </apex:facet>
            </apex:column>    
            <apex:column value="{! ct.lastname }">
                <apex:facet name="header">
                    Last Name
                </apex:facet>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlockSection>
</apex:pageBlock>

score 0 · Accepted Answer · edited Apr 13 '17 at 12:54

0

You could use alert statements or console.log() to see it on the browser debug console.

when you are on chrome, f12-->run the functionality-->open debug console on chrome debug panel-->you should see the console.log() value you want to debug on the panel

You can refer to the following link, How do I start to debug my own Visualforce/JavaScript?

And you can use a button or something to show output on vf page. So when you click the button, you can get the string from controller and render output on the screen.

edited Apr 13 '17 at 12:54

Community

1

answered Jun 13 '16 at 19:38

Anurag

2,216
7
41
67

I think this will be the way to go. I was hoping to iterate a basic page output scenario like binding it to an actionfunction, but I'm not sure if that's possible or if visualforce has anything for arrays of objects. – Fred O'Hara Jun 13 '16 at 20:09

AlphaBravo · Answer 2 · 2016-06-13T19:49:20.907

There are a few ways to do this, I am not sure why you are using Javascript because it cannot write to a pageblocktable. Quick and easiest way to output to a page would be:

public with sharing class ContactDynamicSearchController {


    // send query results to page
    public List<Contact> getcontacts() {
        return [Select id, firstname, lastname From Contact];
    }

}



<apex:pageBlock >
    <apex:pageBlockSection >
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.id }">
                <apex:facet name="header">
                    ID
                </apex:facet>
            </apex:column>
            <apex:column value="{! ct.firstname }">
                <apex:facet name="header">
                    First Name
                </apex:facet>
            </apex:column>    
            <apex:column value="{! ct.lastname }">
                <apex:facet name="header">
                    Last Name
                </apex:facet>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlockSection>
</apex:pageBlock>

That will output to the pageblocktable.

If you plan on adding a query when it changes as the user inputs data you can do that. Here's a reference: http://gtr.net/how-to-build-a-simple-search-page-using-visualforce/

OR

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

Using JavaScript Variables for Visualforce Output

2 Answers2