2

I used to pass the variables in terms of dictionary to HTML template in Django without any problem. Now I plan to add some javascript into the HTML file, and use the same way "{{ }}" to obtain the object from dictionary in javascript. All the objects in the dictionary are actually strings. In Django, the code is:

dataDict = {}
dataDict["time"] = json.dumps(",".join(timeList))
return render_to_response("xxxx.html", dataDict,\
         context_instance=RequestContext(request))

And in HTML page and Javscript, I just want use a string variable to receive it and then resolve the information I want, and our code is:

var test = {{ time }};

But it seems Django cannot pass the data to the string variable in Javascript. So I have two questions:

  1. Is there some special type of variable to pass the data from the Django to Javascript. Does JSON be possible? Or is it a must to convert string to JSON string in Django first before passing to Javascript?
  2. How to use the delivered string in Javascript? Apparently just use var xx = xxxx; doesn't work. We think we can pass data but it seems cannot be processed.

Does anybody have some idea about it?

Thanks!

Daniel DiPaolo
  • 55,313
  • 14
  • 116
  • 115
LuciferTian2010
  • 403
  • 1
  • 7
  • 17

2 Answers2

9

Maybe you just need to double quote it?

var test = "{{time}}";

Let's assume that dataDict['time'] = "1:30 PM, 2:30 PM". When your template is rendered it creates this text (verify it yourself w/ view source):

var test = 1:30 PM, 2:30 PM;

As you can see, this isn't valid JavaScript. When you double quote it it becomes this:

var test = "1:30 PM, 2:30 PM";

Similarly, you'll want to double quote your DOM elements with interpolated attributes, e.g., <a href="{{url}}">..</a>. The Django builtin template filter docs have numerous examples of this.

It's important to keep in mind the difference between template evaluation / rendering time in your Python environment and JavaScript browser execution / evaluation time, especially when you try to pass data between the two.

A Lee
  • 7,828
  • 4
  • 35
  • 49
  • Thanks. It works well. But could you tell me why it needs " ", because I think {{time}} just pass an object to the javascript, so what is meaning of a object with two "? Is it a string? – LuciferTian2010 Mar 27 '11 at 18:36
  • Done, I've added more detail to my initially sparse post. Hope it helps. – A Lee Mar 27 '11 at 22:04
1

Converting to JSON is recommended in order to prevent things such as spurious </script>-containing strings from causing issues with JavaScript. Assigning should be enough, since JSON strings look like JavaScript literals.

Ignacio Vazquez-Abrams
  • 776,304
  • 153
  • 1,341
  • 1,358