1

This is a sample of my current list-group:

enter image description here

Since Python Flow Control link on side bar is active, I want it to be highlighted by adding a CSS active class.

I think I can do that using current URL of the page, being in Python Flow Control page the current URL looks like http://localhost:8000/python/python-flow-control/ and in template if I type {{ request.path }} it would return /python/python-flow-control/.

Using URL I tried this approach but it didn't work:

<div class="list-group">
{% for sub_cat in sub_cats %}
    <a href="{% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug %}" class="list-group-item list-group-item-action {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %}">
    {{ sub_cat.sub_cat_title }}</a>
{% endfor %}
</div>

I added {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %} to check if the current URL matches with url of the current clicked link and if it matches add css active class.

However, this had no effect. It didn't throw any error and didn't work either.

edit: I tried this, it didn't work either

{% url '{{request.path}}' category='python' sub_cat='python-introduction' as target %}

{% if target %}
    <div class="bg-secondary">active</div>
{% endif %}
Mir Stephen
  • 1,758
  • 4
  • 23
  • 54
  • What exactly is your question? Your solution should work. – Risadinha Jun 17 '19 at 05:53
  • the question is how do I add active class to current clicked link of side bar? I shown my approach, it didn't throw any error and didn't work either. – Mir Stephen Jun 17 '19 at 05:55
  • `{% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %}` are there any errors in here? – Mir Stephen Jun 17 '19 at 05:56
  • https://github.com/basirpayenda/tutorial-website this is its link on github, i hope someone looks and help me with this – Mir Stephen Jun 17 '19 at 06:01
  • Have you checked that the request.path is really what you expect, including slashes? I'd recommend using the url resolver to generate path, everywhere in your code (template and else). code: https://docs.djangoproject.com/en/2.2/ref/urlresolvers/#resolve and template: https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#url – Risadinha Jun 17 '19 at 06:09
  • Yes, request.path works as expected, assuming i clicked on `Python Introduction` link, the url will then look like this `/python/python-introduction/` and `request.path` returns the very same url `/python/python-introduction/`. according to above example `sub_cat.sub_cat_parent.cat_slug` returns `Python` and `sub_cat.sub_cat_slug` returns `python-introduction`, I think the only problem remains in here is with slashes. The slashes are placed wrong. or there is other problem with it. – Mir Stephen Jun 17 '19 at 06:15
  • If it is "Python" instead of "python" it's casing. `==` is a case sensitive comparison. – Risadinha Jun 17 '19 at 06:21
  • I apologize it is 'python'. Can you please take a look to it. I just added a github link? since last night I am trying different ways nothing seems to work. It would be a great help. Thank you sir – Mir Stephen Jun 17 '19 at 06:24

1 Answers1

1

I added {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %} to check if the current URL matches with url of the current clicked link and if it matches add css active class. However, this had no effect. It didn't throw any error and didn't work either.

Of course not, cf my answer to your (almost duplicate) other question.

edit: I tried this, it didn't work either

{% url '{{request.path}}' category='python' sub_cat='python-introduction' as target %}

{% if target %}

Of course not. First because the first argument to {% url %} is the url's name, not request.path - which you should know since it's already in your original snippet:

<a href="{% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug %}" class="list-group-item list-group-item-action">

and then because {% if target %} only tests the boolean value of target.

The simple obvious answer is:

<div class="list-group">
{% for sub_cat in sub_cats %}
    {% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug as sub_cat_url %}
    <a href="{{ sub_cat_url }}" class="list-group-item list-group-item-action {% if request.path==sub_cat_url %} active {% endif %}">
    {{ sub_cat.sub_cat_title }}</a>
{% endfor %}
</div>
bruno desthuilliers
  • 75,974
  • 6
  • 88
  • 118