Question

I want to build a menu where I can set one link highlighted using the {% block %} tag. I have something like this in my Javascript:

<loop>
$('#a-div').append('{% block ' + variable + ' %} <a href...</a> {% endblock %}')
<endloop>

In the source, this is displayed as “{% block Home %}”

How can I make JQuery not append this as a string but as a template tag?

Answer 1

You can’t. At least not without making an AJAX request to a Django template. In your case, it would be slow and make unnecessary extra requests. It’s just not worth it. You can insert snippets from Django templates via jQuery by using, for example, the jQuery load function. But you can’t replace a specific {% block %} tag, because by the time jQuery runs, the template has already been processed (and references to block tags removed). But this is not a situation where you should be doing that in any case.

Why don’t you rather highlight the menu with a CSS class? Here is my usual solution to this problem:

1. Create a file called base_extras.py in one of your templatetags folders. If you don’t have one, create one in an appropriate folder.

2. Inside base_extras.py, paste this code:

   from django import template
   from django.core.urlresolvers import reverse
   
   register = template.Library()
   
   @register.simple_tag
   def navactive(request, urls):
       if request.path in ( reverse(url) for url in urls.split() ):
           return "active"
       return ""
   

3. Now, in your template, on your menus in your base template, do something like this:

   <ul class="menu">
       <li class="home {% navactive request 'home' %}"><a href="{% url home %}">Home</a></li>
       <li class="contact {% navactive request 'contact' %}"><a href="{% url contact %}">Contact</a></li>
       <li class="signup {% navactive request 'signup' %}"><a href="{% url signup %}">Sign up</a></li>
   </ul>
   

4. This will make that the menu where your URL currently is has the active class. Then, in your CSS, just add a special class for a menu item with active to look slightly different than the other menus.

   ul.menu li.active {background: red; color: white;}
   

And if you happen to need to change the active menu with jQuery, you can just remove the active class on all menus, and add it to the newly selected menus:

$('ul.menu li').removeClass('active').find('.home').addClass('active'); // for example