how to pass the string from django to javascript

Question

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:

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?
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!

A Lee · Accepted Answer · 2011-03-27 21:36:03Z

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.

edited Mar 27, 2011 at 21:36

answered Mar 27, 2011 at 4:13

A Lee

8,1364 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LuciferTian2010 Over a year ago

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?

A Lee Over a year ago

Done, I've added more detail to my initially sparse post. Hope it helps.

Ignacio Vazquez-Abrams · Accepted Answer · 2011-03-27 04:08:37Z

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.

answered Mar 27, 2011 at 4:08

Ignacio Vazquez-Abrams

804k160 gold badges1.4k silver badges1.4k bronze badges

3 Comments

Tomasz Zieliński Over a year ago

And for simple assignments there is escapejs filter: escapejs('<>') -> u'\\u003C\\u003E'

Ignacio Vazquez-Abrams Over a year ago

@Tomasz: Sure, but \u003C\u003E still isn't valid JavaScript without the quotes.

Abdul Aziz Barkat Over a year ago

I've done some testing and even converting to JSON isn't a safe way and is still vulnerable to XSS, best use the json_script template filter.

Collectives™ on Stack Overflow

how to pass the string from django to javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related