Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

384
Views
How to active subindex button in django using jinja2 or js?

I am trying to active(highlight) sub-index on a page in Django. Click here to see the sample image

Here are my files:

home.html

<div class="col-md-2 text-left" id="subIndex">
            <br><br>
            <h5 class="text-primary">CATEGORIES</h5>
            <!-- <a href="/" class="abc btn btn-outline-success my-1 " style="width: 100%; text-align: left;">All Products </a> -->
            <a href="/" class="abc btn btn-outline-success my-1 " style="width: 100%; text-align: left;">All Products </a>
            
            <!-- Here href="/?category={{category.id}}" generates the category link -->
            {% for category in categories %}
            <a href="/?category={{category.id}}" class="btn btn-outline-success my-1 {% if category.id in request.get_full_path %} active {% endif %}" style="width: 100%; text-align: left;">{{category}} </a>               
            {% endfor %}

 </div>

urls.py

from django.urls import path
from home import views
urlpatterns = [
path('', views.home, name='home'),
***
]

view.py

from admn import models as AMODEL
def home(request):
    categories = AMODEL.product_category.objects.all()
    context = {
      'categories' : categories,
        }
     return render(request, 'home/home.html', context)

I have tried to Javascript. But this could not work.

main.js

// Add active class to the current button (highlight it)
let hd = document.getElementById("subIndex");
let btnss = hd.getElementsByClassName("btn");
console.log(btnss)
for (let i = 0; i < btnss.length; i++) {
btnss[i].addEventListener("click", function () {
let current = document.getElementsByClassName("active");
if (current.length>0){
current[0].className = current[0].className.replace(" active", "");
// console.log(current[0])
}
// current[0].className = current[0].className.replace(" active", "");
this.className += " active";
console.log(this.className);
 });
}

I am using Django, bootstrap & JS. This js code works on html projects. But in Django, It does not work well. I will be glad if anyone help me for fixing this problem.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!