Using django model data in a bootstrap template

user_15444042 0
Viewed 67

I'm attempting to create an expanding list displaying elements of a model that I have in django, but I'm having trouble getting the bootstrap 5 collapse function to work with the data from django. I'm relatively new to both, getting back into coding after an extended break. The code works if I replace id="{{saga.name}} with id="placeholder" and href="#{{ saga.name }}" with href="#placeholder", but refuses to do anything with the code as is.

Is there something going on with how bootstrap 5 interprets the data? I feel like I'm going crazy here.

{% for saga in sagaMemberList %}
<a href="{{ saga.get_absolute_url }}">{{ saga.name }}</a>
<a class="btn btn-primary" data-toggle="collapse" href="#{{ saga.name }}" role="button" aria-expanded="false" aria-controls="collapse{{ saga.name }}">dropdown</a>
<div class="collapse" id="{{ saga.name }}">
{% for character in mSagaCharacterList|get_item:saga %}
    <div class="row"><div class="col">
        <a href="{{ character.get_absolute_url }}">{{ character.name }}</a>
    </div></div>
{% endfor %}
</div>
<br>
{% endfor %}

I'm know it's not the prettiest code and I'm sure it's inefficient as hell, but I'm really struggling to understand why it's not working. Thanks for any insight any of you might have.

bootstrap-5 bootstrap-4 django python
1 Answers

After puzzling with it for forever I figured out the answer right after I posted the question, which in hindsight should be obvious. Posting here in case anyone else stumbles across this.

html ids cannot contain whitespace, and the saga.name I was using contained whitespace. Still not sure why {{forloop.counter}} didn't work, but I got around it by adding a method to my model that returned the name in an accepted way.

user_154440420
Related