Alternatives to adding dynamically generated inline JavaScript

Question

Generating inline JavaScript in HTML has always made me feel dirty and after having used YUI a bit I get the sense that it's best to leverage HTML elements as an alternative. Would it be insane to use a hidden <ul> to store keys and values to be used by static JavaScript which would only act when it found the <ul> rather than using inline JavaScript?

What practices are common out there and what practices have the most merit with regards to avoiding inline JavaScript?

Answer 1

I'm not sure I understand the question. Are you trying to add dynamic JavaScript arrays from the server side and inject it into the page?

If so, wouldn't it be easier to use some Ajax and return some JSON?

Answer 2

Another possibility is to dynamically generate your .js files, just like you dynamically generate your .html (or whatever) files.

Answer 3

Depending on the nature of the dynamically generated JavaScript, it might not need to be placed inline. You can simply make a PHP file that will take some parameters and produce JavaScript code, and then just call the PHP file with the needed parameters by using the script tag in your header, something like <script src="foo.js.php?a=b&c=d&x=y&foo=bar">. That's how I handle my dynamic JavaScript generation needs.

Answer 4

I think it's plenty reasonable to insert JavaScript into a document, particular when you're populating data that changes dynamically with the page. I don't think there is any advantage to storing that data in HTML tags rather than putting in inline script.

What you should do is minimize the amount of inline script needed by factoring out code that can be moved to a separate JavaScript file.

Answer 5

One of the things I'm doing when possible is to output (from PHP) some JSON inside some SCRIPT tag that will be later used by my JS code. Something like this:

<script type="text/javascript">

var db_data = <?php echo json_encode($db_data); ?>;

process_db_data_from_js(db_data);

</script>

I believe Flickr is using something like this for their search suggest.

Answer 6

If you need to get some data from your server-side application into your JavaScript, I've found it's just best to use Ajax.

Sure, you can put it into HTML elements, but that's finnicky and makes for bad semantics in your HTML. Also, people using lynx will see it as part of your page.

You can also dynamically generate the JavaScript itself, but that leaves a whole other host of problems you have to defend against, possibly even JavaScript injection.

Answer 7

You could add attributes to your elements, then have non-static or static JS that looks for them.

<div id="..." extraAttribute="whatever">
</div>

Using JQuery, this is easily found.

var extraDivs = $('div[extraAttribute]');

(I highly recommend JQuery for this sort of coding.)