Menu
I have a Django template with the following code which creates multiple buttons and tries to delete/hide one of them on a click (on the same button):
{% for h in helicopters %}
<div class="btn-group" id="remove-heli">
<button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
{{ h }}
</button>
</div>
{% endfor %}
where helicopters is a list of strings, and later in the script block I have
function my_func(h) {
document.getElementById('remove-heli').style.visibility = 'hidden';
}
The function runs, but as you may expect, it runs only on the first element of my for loop, because all the <\div> elements in the for loop have the same id.
My question is: is there a way to point to the particular element? or alternatively, is there a better way to print buttons next to each other?
588
For loop in Django template templates tag for-loop 0 50181 For loop is used to iterate over any iterable object, accessing one item at a time and making it available inside the for loop body. For example, if you want to create a drop down of countries in Django template, you can use the below code.
Here is a simple way to loop through it in your Django template page.html In the above code, we loop through the ID list returned by our Django view. You can refer to each item directly within { { }}.
There is no break statement in Django template For loop. Depending on your requirement you can do one of the following. Option 1 - Iterate over the whole list but do not perform any action if the condition is not matched. For example, you are printing numbers from a list and you need to exit the list as soon as number 99 is encountered.
You might have implemented loop through objects in Django to iterate over object items. If you are a Django user, you might have used it at least once to iterate over items. Define URL to navigate into the view. Create an array inside function and pass it as a dictionary to index.html Render the HTML page.
How about set different ids for the div elements?
{% for h in helicopters %}
<div class="btn-group" id="remove-heli-{{ h }}">
<button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
{{ h }}
</button>
</div>
{% endfor %}
Then, you can access the specific div element with the id.
function my_func(h) {
document.getElementById('remove-heli-' + h).style.visibility = 'hidden';
}
NOTE
Using same ID for several elements is not a good idea. Use unique id.
UPDATE
Alternatively, you can use forloop.counter:
{% for h in helicopters %}
<div class="btn-group" id="remove-heli-{{ forloop.counter }}">
<button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
{{ h }}
</button>
</div>
{% endfor %}
This could actually be accomplished more simply by passing this to my_func, eg:
onclick='my_func(this);'
The this variable contains the DOM element which triggered the event, so it would be whatever button was clicked.
function my_func(this) {
this.style.visibility = 'hidden';
}
But this of course only works when you want the button to hide itself. If you want it to hide something else, then using different id's is the way...
If you are still confused about the whole "what runs where" thing.. just do a View Page Source on the browser and you'll see exactly what your template generated. Everything else happens in the browser. The browser developer tools are your friend here.. open them up so you can see any errors you are getting etc. If you want to do this stuff you need to get into using the developer part of the browser, you will go insane otherwise.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
