0

I am trying to use a django context variable in my jquery script.

First of all, this WORKS:

index.html

<head>
    <script type="text/javascript">
        var page_size = {{page_obj.paginator.num_pages}};
    </script>

    <script type="text/javascript" src="{% static 'js/paginate.js' %}"></script>
</head>

js/paginate.js

$(document).ready( function() {
    alert(page_size);                           //THIS WORKS!!!
});



However, I didn't want the users to be able to be view my variables so I simply added the global variable declaration in my "paginate.js" file:

index.html

<head>
    <script type="text/javascript" src="{% static 'js/paginate.js' %}"></script>
</head>

js/paginate.js

var page_size = {{page_obj.paginator.num_pages}};              //Exactly the same as the above!!

$(document).ready( function() {
    alert(page_size);                           //ERROR!!!
});


Strangely enough, this gives me an error:

SyntaxError: invalid property id
    var page_size = {{page_obj.paginator.num_pages}};

I have no idea why the first one works while the second one gives me an error, because they are exactly the same... Maybe because I'm second one is declaration in Jquery..?? Any idea??

Thanks..

user2492270
  • 2,215
  • 6
  • 40
  • 56
  • 1
    `static` means 'constant'. Static is not a template, it is, simply, a file with out code or vars. You should learn about 'include': https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include – dani herrera Aug 20 '13 at 09:47
  • 2
    And not sure why you think having the declaration in a separate file would mean that users would not be able to view your variables, or why you think that's desirable in the first place. – Daniel Roseman Aug 20 '13 at 09:53
  • Also, this is considered so bad of a practice that stressing it again would be an understatement. A javascript file that you serve *DOES NOT* go through any Django processors so as to get a sense of a the template context and further more just adding your javascript variables to a new javascript file will still allow me to inspect the file and see your variables. (IE. this *DOES NOT* produce encapsulation). – Henrik Andersson Aug 20 '13 at 09:54
  • @limelights so you mean I should not be using django variables in JS files AT ALL?? – user2492270 Aug 20 '13 at 11:10
  • @limelights When you say "THIS is considered so bad of a practice," what exactly is THIS that you are referring to..? – user2492270 Aug 20 '13 at 11:11
  • A) Using inline JavaScript and B) Mixing Django variables with JavaScript. It could signal that you have bad design somewhere. And if you need to get variables to use in your js then you should use a hidden field to store the variables in the DOM and retrieve it from there. – Henrik Andersson Aug 20 '13 at 11:13

2 Answers2

3

TL;DR

You can't pass a variable to a static files because they aren't parse by the Django template processor.

Explanations

Your first example works because you set the {{ page_obj.paginator.num_pages }} in your template, which will be parsed and transform into a number. When you're returning a template with Django (through any render method), only the template will be rendered. CSS and Javascript linked in your template are called static files: that means they're ressources which will not be read by the Django template processor.

Imagine that you want to insert your variable in an img in your page. Does it makes any sense? No? However, it's the same behavior.

How to do this then?

You can get the data either via an AJAX request in your Javascript file (warning: a bit overkill for your case here), or using your first method.

Related topic:

Community
  • 1
  • 1
Maxime Lorant
  • 34,607
  • 19
  • 87
  • 97
0

In Django, if we need to pass variables from a view to a JS/html file, we'll have to ensure that the file is parsed by the django template engine. In other words the file has to be served by Django.

Whereas here, the included Javascript isn't processed by the Django template processor on the server, so that won't work.

If you need to pass template variables to be used in JS files, then you have to use the first method mentioned in the question i.e. create a small <script> block wherein some global variable is declared to contain those template variables. Then, any JS file can get the values by looking for the global js variable.

Sudipta
  • 4,773
  • 2
  • 27
  • 42