[FIXED] how to pass the string from django to javascript

Issue

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!

Solution

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.

Answered By - A Lee