Combining different javascript objects rendered by multiple components

Question

I have a component which writes/generates javascript from a server side renderer. This component can be used in multiple times in a same page. However, once the page is loaded I have to collect all the variables or JSO written by this multiple components in the page. How can I do this so that I will have a collection of all the variables or JSO? For e.g. If this component (lets say ) is used twice in the page then it emits two javascript block on client/browser - var arr1 = new Array['First', 'Second'] and var arr2 = new Array['Third', 'Fourth'].

In order to make a final rendering I have to combine these two arrays.

Answer 1

You will need to be a little more specific about your problem, maybe with an example page but here are some thoughts.

If you have a server-side component that writes JavaScript during page generation, I would generate a function call each time, something like:

Component_appendArray(['First', 'Second']);
...
Component_appendArray(['Third', 'Fourth']);

then ensure that you have your function Component_appendArray() defined before these calls:

var globalArray = [];
function Component_appendArray(array)
{
     globalArray = globalArray.concat(array);
}

At the end, globalArray should contain:

['First', 'Second', 'Third', 'Fourth']

Hope this helps.

Answer 2

Although I do not understand the entire scenario, let me suggest that if you are printing out variables throughout the HTML in order to use them after the page loads, that you instead use hidden input fields. I see this often, where variables are used to pass values to a function or a script at the bottom of the page, but using the values of hidden input fields allows you to get all your scripts out of the content areas. It makes for a cleaner solution.