I'm used to putting my javascripts in the top of my page in the head section. In my javascript, I use a lot of template stuff from Django like: {{ user.id }} {{ post.body }}
I decided to move my javascript into another file, and then import it using: script src=
But since my javascript is in another file now it can't read my Django template stuff.
What do I do? I have Django template stuff all over the javascript, and I must move my javascript to another file.
You can generate your javascript as a template too! But that requires serving your dynamic javascript via Django.
For instance..
#views def some_js(request): return render_to_response('js/some_dynamic_js.js', {}, mimetype='text/javascript') There is nothing that says that Django templates must be HTML. They are simply a way of templating TEXT. Code is text, so it can be templated. I do this in my current project.
return render_to_response('js/some_dynamic_js.js', mimetype='text/javascript') Can you edit your answer for others to know this?You could use a JSON array as Samet suggested, or even just regular JS variables.
<script type='text/javascript'> some_numeric_property = {{variable1}}; some_string_property = '{{variable2}}'; </script> Another way to do it (the way I'd usually go) is to pass all the details you need in via function calls and data- attributes. For example, if I wanted a certain link to pop up an AJAX bubble with a user's profile on hover I might do this:
<a href='/profile/{{user.id}}' onmouseover='show_user_popup({{user_id}})'>{{user.name}}</a> or this (presuming my script was attaching events to links with classes of user-link):
<a href='/profile/{{user.id}}' class='user-link' data-uid='{{user_id}}'>{{user.name}}</a> You could also call these functions in the head of your HTML straight after loading it if desired.
<script type='text/javascript' src='{{MEDIA_URL}}/js/whatever.js'></script> <script type='text/javascript'> do_something_with_a_number({{variable1}}); do_something_with_a_string('{{variable2}}'); </script> The advantage of the latter is, because no code gets executed when you load the JS file (with the exception of creating and binding function objects, obviously), you can have the one JS file included on every page on your site, and just call the bits you need on the appropriate pages. This one file would then get cached after the first load (assuming you're sending the right headers), decreasing load times for subsequent pages.
EDIT: security considerations: The method I've described (along with many of the other methods on this page) suggest inserting data as either a) attributes of HTML tags or b) JavaScript entities. This is safe so long as you know the data either a) can't be set by untrusted users or b) is always in a "safe" format (ie the data comes from a SlugField or an IntegerField or something in the database).
However, if neither of those are the case, you'd need to protect against HTML and/or JS injection, by escaping the appropriate characters. Django's default behaviour of HTML entity escaping might protect you in some cases, but it might not, so it's worth checking.
Dump some JSON object at top of page in a script tag:
<script type='text/javascript'> var a = {{ someJsonObject }} </script> Then include your separate javascript file and use a.variable1, a.variable2 etc. in your javascript codes.
var a = {foo: "{{value1}}", bar: "{{value2}}"}; there's a JS injection vulnerability (ie value1 could be "}; naughtyJSCodeHere(); /* and naughtyJSCodeHere() would get executed) but if you did it as Samet suggested and someJsonObject was a string generated by simplejson or some other JSON library, it should all be escaped properly.