CODEWITHSUNDEEP
javascriptjquerydjango
user2492270
user2492270

Reputation: 2285

Defining Django context variable in Jquery giving me error?

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..

Upvotes: 0

Views: 3672

Answers (2)

Maxime Lorant
Maxime Lorant

Reputation: 36151

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:

Upvotes: 3

Sudipta
Sudipta

Reputation: 4971

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.

Upvotes: 0

Related Questions