VisualForce, Apex:Repeat, for Javascript array Update

jordan.baucke picture jordan.baucke · Mar 4, 2011 · Viewed 7.6k times · Source

this is an extension of a question I asked on the Salesforce developer boards that didn't get much play:

I have a VisualForce page that requires frequent changes to load new information from the controller and embed that information into a Javascript array for further use.

Curent solution: rI've had success using VisualForce 'Browser Technologies' as described here (in the Wiki): http://wiki.developerforce.com/index.php/Using_Browser_Technologies_in_Visualforce_-_Part_1

I surround the Javascript array.push with the recommended tags:

<apex:repeat value="{!Object}" var="objects">       
    d.push( {
               element1: "{!objects.id}"            
    })
</apex:repeat>

Issue: The array is correctly populated when an entire page refresh populates, and when I use my 'dropdown' to modify the filter on the object (in the controller), the DOM Is updated (I Can see new information being placed on the page),

Ultimately, however, the Javascript array doesn't change it's values unless I call a refresh on the entire page, which sort of defeats the Partial Refresh and is kind of shock to the system for users.

This 'necessary post' issue wasn't a problem before, and even when I directly call the Javascript function that contains this array population after the DOM has been updated the Javascript array doesn't change (So I'm assuming that it's loaded once based on what's at the DOM when the page initially posts back and can't be changed.

Thoughts?

Answer

Ralph Callaway picture Ralph Callaway · Mar 16, 2011

If you want to control when your array gets refreshed wrap it in an outputpanel and put its id in the rerender attribute of whatever causes the data to need an update. I had to use this previously to reattach some custom jQuery input listeners when every the dom was re-updated.

<apex:commandButton action="{!something}" rerender="scriptPanel"/>
<apex:outputPanel id="scriptPanel>
  <script>
     d = new Array();
     <apex:repeat value="{!objects}" var="object">
       d.push({
           element1: "{!objects.id}"            
       });
     </apex:repeat>
  </script>
</apex:outputPanel>