What is the best way to pass server side variables to JavaScript on the client side?

Question

Our application uses a lot of configuration options. Those options need to be reflected on the client side in the form of User preferences, site wide preferences, etc.

Currently, we pass server side settings down to the client side in the form of JSON that is stored in custom attributes in the markup for a specific element (and no, our application currently doesn't worry about W3C validation). We then retrieve the data from the custom attribute, and parse it into a JSON object for use in script using jQuery.

One drawback to this is referencing attributes on elements from within event handlers. I know this is frowned upon, as it can create circular references, and subsequently memory leaks. I would much prefer to use jQuery's data function, but you can't invoke this from the server side at page render time.

What does everyone else do in this type of scenario?

Answer 1

Return the server data in JSON format. You could do this through AJAX by returning a JSON header, or simple page outup and JSON.parse().

You can assign the JSON data directly to an element's data.

$('#elementid').data('serverdata', data);

Update

After better understanding your situation I would suggest you use the data- attributes for three reasons.

1. You will have standards compliant markup.
2. The recent version of jQuery relies on these for the .data function.
3. The change will require little modification to your current application (changing the way custom attributes are output from customAtt="value" to data-customAtt="value"

Here is some more information on the data attributes.

Answer 2

You can render in the page an inline script that defines a JS object with all the preferences. This way, your scripts have access to the data the moment the browser is done with the page load. The drawbacks:

• you have inline script in the page, which some people frown upon;
• caching the page might result in oder preferences being used for particular page instance;
• each page size is increased with the prefs size.

Or you can render in the page a link to an external script that declares the preferences. This way, the preferences don't block the page rendering, and can be cached separately by the browser. Drawbacks:

• the page might render with older preferences and then get update to the new preferences, which on slower networks might be visible;

Or you could directly add the data to an element using the HTML5 data attributes (thus being HTML5 conformant and jQuery.Data compatible, as it uses those as well). Drawback:

• you lose IE support;