How to pass a django variable from html page to javascript

Question

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 1

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>