Django Template Variables and Javascript

Question

When I render a page using the Django template renderer  I can pass in a dictionary variable containing various values to manipulate them in the page using    myVar      Is there a way to access the same variable in Javascript  perhaps using the DOM  I don t know how Django makes the variables accessible   I want to be able to lookup details using an AJAX lookup based on the values contained in the variables passed in

User · Answer

A solution that worked for me is using the hidden input field in the template

<input type="hidden" id="myVar" name="variable" value="{{ variable }}">

Then getting the value in javascript this way,

var myVar = document.getElementById("myVar").value;

User · Answer

There are two things that worked for me inside Javascript      context variable escapejs       and other        In views py   from json import dumps as jdumps  def func request       context   message   jdumps  hello there        return render request  index html  context    and in the html      message safe

User · Answer

you can assemble the entire script where your array variable is declared in a string  as follows       views py       aaa    41  56  25  48  72  34  12      prueba     lt script gt var data2         for a in aaa          aa   str a          prueba   prueba         aa            prueba   prueba       lt  script gt     that will generate a string as follows  prueba     lt script gt var data2    41   56   25   48   72   34   12    lt  script gt     after having this string  you must send it to the template     views py   return render request   example html     prueba   prueba     in the template you receive it and interpret it in a literary way as htm code  just before the javascript code where you need it  for example     template      prueba safe       and below that is the rest of your code  keep in mind that the variable to use in the example is data2   lt script gt   console log data2    lt  script gt    that way you will keep the type of data  which in this case is an arrangement

User · Answer

The   variable   is substituted directly into the HTML  Do a view source  it isn t a  variable  or anything like it  It s just rendered text   Having said that  you can put this kind of substitution into your JavaScript    lt script type  text javascript  gt      var a      someDjangoVariable      lt  script gt    This gives you  dynamic  javascript

User · Answer

For a dictionary  you re best of encoding to JSON first  You can use simplejson dumps   or if you want to convert from a data model in App Engine  you could use encode   from the GQLEncoder library

User · Answer

I use this way in Django 2 1 and work for me  and this way is secure   reference    Django side   def age request       mydata     age  12      return render request   test html   context   mydata json   json dumps mydata      Html side    lt script type  text javascript  gt       const  mydata      mydata json safe     console log mydata    lt  script gt

User · Answer

The   variable   is substituted directly into the HTML  Do a view source  it isn t a  variable  or anything like it  It s just rendered text   Having said that  you can put this kind of substitution into your JavaScript    lt script type  text javascript  gt      var a      someDjangoVariable      lt  script gt    This gives you  dynamic  javascript

User · Answer

For a dictionary  you re best of encoding to JSON first  You can use simplejson dumps   or if you want to convert from a data model in App Engine  you could use encode   from the GQLEncoder library

User · Answer

Here is what I m doing very easily  I modified my base html file for my template and put that at the bottom      if DJdata         lt script type  text javascript  gt           function     window DJdata     DJdata safe              lt  script gt     endif      then when I want to use a variable in the javascript files  I create a DJdata dictionary and I add it to the context by a json   context  DJdata     json dumps DJdata   Hope it helps

User · Answer

CAUTION Check ticket  17419 for discussion on adding similar tag into Django core and possible XSS vulnerabilities introduced by using this template tag with user generated data  Comment from amacneil discusses most of the concerns raised in the ticket     I think the most flexible and handy way of doing this is to define a template filter for variables you want to use in JS code  This allows you to ensure  that your data is properly escaped and you can use it with complex data structures  such as dict and list  That s why I write this answer despite there is an accepted answer with a lot of upvotes   Here is an example of template filter      myapp templatetags js py  from django utils safestring import mark safe from django template import Library  import json   register   Library      register filter is safe True  def js obj       return mark safe json dumps obj     This template filters converts variable to JSON string  You can use it like so      myapp templates example html     load js      lt script type  text javascript  gt      var someVar      some var   js      lt  script gt

User · Answer

For a JavaScript object stored in a Django field as text  which needs to again become a JavaScript object dynamically inserted into on-page script  you need to use both escapejs and JSON parse     var CropOpts   JSON parse     profile last crop coords escapejs         Django s escapejs handles the quoting properly  and JSON parse   converts the string back into a JS object

User · Answer

For a dictionary  you re best of encoding to JSON first  You can use simplejson dumps   or if you want to convert from a data model in App Engine  you could use encode   from the GQLEncoder library

User · Answer

I ve been struggling with this too  On the surface it seems that the above solutions should work  However  the django architecture requires that each html file has its own rendered variables  that is    contact   is rendered to contact html  while   posts   goes to e g  index html and so on   On the other hand   lt script gt  tags appear after the   endblock   in base html from which contact html and index html inherit   This basically means that any solution including    lt script type  text javascript  gt      var myVar       myVar      lt  script gt    is bound to fail  because the variable and the script cannot co-exist in the same file    The simple solution I eventually came up with  and worked for me  was to simply wrap the variable with a tag with id and later refer to it in the js file  like so      index html  lt div id  myvar  gt    myVar    lt  div gt    and then      somecode js var someVar   document getElementById  myvar   innerHTML    and just include  lt script src  static js somecode js  gt  lt  script gt  in base html as usual  Of course this is only about getting the content  Regarding security  just follow the other answers

User · Answer

I was facing simillar issue and answer suggested by S Lott worked for me    lt script type  text javascript  gt      var a      someDjangoVariable     lt  script gt    However I would like to point out major implementation limitation here  If you are planning to put your javascript code in different file and include that file in your template  This won t work   This works only when you main template and javascript code is in same file  Probably django team can address this limitation

User · Answer

Note  that if you want to pass a variable to an external  js script then you need to precede your script tag with another script tag that declares a global variable    lt script type  text javascript  gt      var myVar       myVar      lt  script gt    lt script type  text javascript  src     static  scripts my script js      gt  lt  script gt    data is defined in the view as usual in the get context data  def get context data self   args    kwargs       context  myVar     True     return context

User · Answer

There are two things that worked for me inside Javascript      context variable escapejs       and other        In views py   from json import dumps as jdumps  def func request       context   message   jdumps  hello there        return render request  index html  context    and in the html      message safe

User · Answer

Here is what I m doing very easily  I modified my base html file for my template and put that at the bottom      if DJdata         lt script type  text javascript  gt           function     window DJdata     DJdata safe              lt  script gt     endif      then when I want to use a variable in the javascript files  I create a DJdata dictionary and I add it to the context by a json   context  DJdata     json dumps DJdata   Hope it helps

User · Answer

I have found we can pass Django variables to javascript functions like this -  lt button type  quot button quot  onclick  quot myJavascriptFunction     my django variable      quot  gt  lt  button gt   lt script gt      myJavascriptFunction djangoVariable          alert djangoVariable          lt  script gt

User · Answer

Note  that if you want to pass a variable to an external  js script then you need to precede your script tag with another script tag that declares a global variable    lt script type  text javascript  gt      var myVar       myVar      lt  script gt    lt script type  text javascript  src     static  scripts my script js      gt  lt  script gt    data is defined in the view as usual in the get context data  def get context data self   args    kwargs       context  myVar     True     return context

User · Answer

I was facing simillar issue and answer suggested by S Lott worked for me    lt script type  text javascript  gt      var a      someDjangoVariable     lt  script gt    However I would like to point out major implementation limitation here  If you are planning to put your javascript code in different file and include that file in your template  This won t work   This works only when you main template and javascript code is in same file  Probably django team can address this limitation

User · Answer

new docs says use    mydata json script  quot mydata quot     to prevent code injection  a good exmple is given here     mydata json script  quot mydata quot      lt script gt      const mydata   JSON parse document getElementById  mydata   textContent    lt  script gt

User · Answer

The   variable   is substituted directly into the HTML  Do a view source  it isn t a  variable  or anything like it  It s just rendered text   Having said that  you can put this kind of substitution into your JavaScript    lt script type  text javascript  gt      var a      someDjangoVariable      lt  script gt    This gives you  dynamic  javascript

User · Answer

new docs says use    mydata json script  quot mydata quot     to prevent code injection  a good exmple is given here     mydata json script  quot mydata quot      lt script gt      const mydata   JSON parse document getElementById  mydata   textContent    lt  script gt

User · Answer

As of Django 2 1  a new built in template tag has been introduced specifically for this use case  json script   https   docs djangoproject com en 3 0 ref templates builtins  json-script  The new tag will safely serialize template values and protects against XSS   Django docs excerpt      Safely outputs a Python object as JSON  wrapped in a  tag    ready for use with JavaScript

User · Answer

you can assemble the entire script where your array variable is declared in a string  as follows       views py       aaa    41  56  25  48  72  34  12      prueba     lt script gt var data2         for a in aaa          aa   str a          prueba   prueba         aa            prueba   prueba       lt  script gt     that will generate a string as follows  prueba     lt script gt var data2    41   56   25   48   72   34   12    lt  script gt     after having this string  you must send it to the template     views py   return render request   example html     prueba   prueba     in the template you receive it and interpret it in a literary way as htm code  just before the javascript code where you need it  for example     template      prueba safe       and below that is the rest of your code  keep in mind that the variable to use in the example is data2   lt script gt   console log data2    lt  script gt    that way you will keep the type of data  which in this case is an arrangement

User · Answer

The   variable   is substituted directly into the HTML  Do a view source  it isn t a  variable  or anything like it  It s just rendered text   Having said that  you can put this kind of substitution into your JavaScript    lt script type  text javascript  gt      var a      someDjangoVariable      lt  script gt    This gives you  dynamic  javascript

User · Answer

There is a nice easy way implemented from Django 2 1  using a built in template tag json script  A quick example would be  Declare your variable in your template     variable json script  name     And then call the variable in your  lt script gt  Javascript  var js variable   JSON parse document getElementById  name   textContent   It is possible that for more complex variables like  User  you may get an error like  quot Object of type User is not JSON serializable quot  using Django s built in serializer  In this case you could make use of the Django Rest Framework to allow for more complex variables

User · Answer

I use this way in Django 2 1 and work for me  and this way is secure   reference    Django side   def age request       mydata     age  12      return render request   test html   context   mydata json   json dumps mydata      Html side    lt script type  text javascript  gt       const  mydata      mydata json safe     console log mydata    lt  script gt

User · Answer

I have found we can pass Django variables to javascript functions like this -  lt button type  quot button quot  onclick  quot myJavascriptFunction     my django variable      quot  gt  lt  button gt   lt script gt      myJavascriptFunction djangoVariable          alert djangoVariable          lt  script gt

User · Answer

There is a nice easy way implemented from Django 2 1  using a built in template tag json script  A quick example would be  Declare your variable in your template     variable json script  name     And then call the variable in your  lt script gt  Javascript  var js variable   JSON parse document getElementById  name   textContent   It is possible that for more complex variables like  User  you may get an error like  quot Object of type User is not JSON serializable quot  using Django s built in serializer  In this case you could make use of the Django Rest Framework to allow for more complex variables

User · Answer

For a JavaScript object stored in a Django field as text  which needs to again become a JavaScript object dynamically inserted into on-page script  you need to use both escapejs and JSON parse     var CropOpts   JSON parse     profile last crop coords escapejs         Django s escapejs handles the quoting properly  and JSON parse   converts the string back into a JS object

User · Answer

For a dictionary  you re best of encoding to JSON first  You can use simplejson dumps   or if you want to convert from a data model in App Engine  you could use encode   from the GQLEncoder library

User · Answer

As of Django 2 1  a new built in template tag has been introduced specifically for this use case  json script   https   docs djangoproject com en 3 0 ref templates builtins  json-script  The new tag will safely serialize template values and protects against XSS   Django docs excerpt      Safely outputs a Python object as JSON  wrapped in a  tag    ready for use with JavaScript

User · Answer

CAUTION Check ticket  17419 for discussion on adding similar tag into Django core and possible XSS vulnerabilities introduced by using this template tag with user generated data  Comment from amacneil discusses most of the concerns raised in the ticket     I think the most flexible and handy way of doing this is to define a template filter for variables you want to use in JS code  This allows you to ensure  that your data is properly escaped and you can use it with complex data structures  such as dict and list  That s why I write this answer despite there is an accepted answer with a lot of upvotes   Here is an example of template filter      myapp templatetags js py  from django utils safestring import mark safe from django template import Library  import json   register   Library      register filter is safe True  def js obj       return mark safe json dumps obj     This template filters converts variable to JSON string  You can use it like so      myapp templates example html     load js      lt script type  text javascript  gt      var someVar      some var   js      lt  script gt

User · Answer

A solution that worked for me is using the hidden input field in the template

<input type="hidden" id="myVar" name="variable" value="{{ variable }}">

Then getting the value in javascript this way,

var myVar = document.getElementById("myVar").value;

User · Answer

I ve been struggling with this too  On the surface it seems that the above solutions should work  However  the django architecture requires that each html file has its own rendered variables  that is    contact   is rendered to contact html  while   posts   goes to e g  index html and so on   On the other hand   lt script gt  tags appear after the   endblock   in base html from which contact html and index html inherit   This basically means that any solution including    lt script type  text javascript  gt      var myVar       myVar      lt  script gt    is bound to fail  because the variable and the script cannot co-exist in the same file    The simple solution I eventually came up with  and worked for me  was to simply wrap the variable with a tag with id and later refer to it in the js file  like so      index html  lt div id  myvar  gt    myVar    lt  div gt    and then      somecode js var someVar   document getElementById  myvar   innerHTML    and just include  lt script src  static js somecode js  gt  lt  script gt  in base html as usual  Of course this is only about getting the content  Regarding security  just follow the other answers

[javascript] Django Template Variables and Javascript

Examples related to javascript

Examples related to python

Examples related to django

Examples related to google-app-engine

Examples related to django-templates