Catherine Catherine - 5 months ago 18
HTML Question

How to pass a django variable from html page to javascript

My website has a sidebar that is the same on all pages. In order to avoid copying and pasting the html for the sidebar for every page I wrote some javascript as this answer suggested: How can I make my navi-bar the same across my html?

I am happy with these results except for one thing, my sidebar displays things like the users name, which I access with

{{ request.user.get_full_name }}
, but this does not work when I put that in my
sidebar.js
. So I thought a good work around would be to set a
var user={{request.user.get_full_name}}
in the
<script>
tags in my html file and then use
<h3>user</h3>
in my js, but I am not sure how to do that.

This is my
sidebar.js


document.getElementById("navMenu").innerHTML =
'<a href="/profile/" style="text-decoration: none; color: white;"><div id="circle"><span class="glyphicon glyphicon-user"></span></div><h3>Your Name</h3></a>'+
'<ul class="nav nav-pills nav-stacked" style="text-align: left;">'+
'<li><a href="/userhome/"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a></li>'+
'<li><a href="/profile/"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp; Profile</a></li>'+
'<li><a href="#"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp; Messages</a></li>'+
'<li><a href="/boards/"><i class="fa fa-users fa-fw" aria-hidden="true"></i>&nbsp; Boards</a></li>'+
'<li><a href="#"><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i>&nbsp; Feed</a></li>'+
'<li><a href="#"><i class="fa fa-globe fa-fw" aria-hidden="true"></i>&nbsp; Notifications</a></li>'+
'<li><a href="#"><label for="logout" style="font-size: 15px; font-weight: inherit;"><i class="fa fa-lock fa-fw" aria-hidden="true"></i>&nbsp; Logout</label></a></li>'+
'</ul>';


So in the second line where it has
<h3>Your Name</h3>
I want that to be the user variable. And this is how I am trying to pass the variable in my HTML page:

<div id="sidebar">
<nav id="navMenu"></nav>
<script src="{% static 'app/js/sidebar.js' %}">var user={{request.user.get_full_name}}</script>
<!-- logout button/form -->
<form action="/" method="post">
{% csrf_token %}
<input class="hidden" id="logout" type="submit" value="Logout"/>
</form>
</div>


I would like to avoid using PHP. The bottom line is can I use django like that inside the
<script>
tags and if so, how do I then use that variable in my javascript?

Answer

I can't find the reference, but I'm skeptical <script src="something.js"> can also have source within it. I've not seen it done that I can recall.

This should work, which is similar to what you are doing:

<script>
    var user = '{{request.user.get_full_name}}'; // created by your django html 
</script>
<script src="{% static 'app/js/sidebar.js' %}"></script>

And then in your sidebar.js you just need to do:

"....<h3>" + user + "<h3>..."

However, a cleaner way to do this would be to encapsulate your js into a function that takes the username as a parameter:

<script src="{% static 'app/js/sidebar.js' %}"></script>

Where your js is something like,

function sidebar(user) {
    document.getElementById("navMenu").innerHTML = "....<h3>" + user + ";<h3>..."
}

Followed by:

<script>
    sidebar('{{request.user.get_full_name}}'); // where this is created via your template.
</script>