Skip to main content

Return to Answer

Removed part of my answer that was duplicate of other answer, left the part that was not.
Source Link
little_birdie
little_birdie
  • 5.9k
  • 3
  • 26
  • 32

You are mixing up the processing that takes place on the server with the processing that takes place in the browser. The template is rendered into html on the server, the javascript runs in the browser, long after your loop has ended. In the browser, everything exists all at once, so each button needs a unique id. Assuming helicopter is a django model.. here I've added the pk (id) field of your helicopter to the end of the button id:

{% for h in helicopters %} <div class="btn-group" id="remove-heli-{{h.pk}}"> <button type="button" class="btn btn-default" onclick='my_func("{{ h.pk }}")'> {{ h }} </button> </div> {% endfor %} function my_func(h_id) { document.getElementById('remove-heli' + h_id).style.visibility = 'hidden'; }

So, now each button has its own id made unique by the database id of the helicopter, and that same database id is passed to my_func() so that it knows which helicopter to hide.

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.

You are mixing up the processing that takes place on the server with the processing that takes place in the browser. The template is rendered into html on the server, the javascript runs in the browser, long after your loop has ended. In the browser, everything exists all at once, so each button needs a unique id. Assuming helicopter is a django model.. here I've added the pk (id) field of your helicopter to the end of the button id:

{% for h in helicopters %} <div class="btn-group" id="remove-heli-{{h.pk}}"> <button type="button" class="btn btn-default" onclick='my_func("{{ h.pk }}")'> {{ h }} </button> </div> {% endfor %} function my_func(h_id) { document.getElementById('remove-heli' + h_id).style.visibility = 'hidden'; }

So, now each button has its own id made unique by the database id of the helicopter, and that same database id is passed to my_func() so that it knows which helicopter to hide.

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.

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.

Source Link
little_birdie
little_birdie
  • 5.9k
  • 3
  • 26
  • 32

You are mixing up the processing that takes place on the server with the processing that takes place in the browser. The template is rendered into html on the server, the javascript runs in the browser, long after your loop has ended. In the browser, everything exists all at once, so each button needs a unique id. Assuming helicopter is a django model.. here I've added the pk (id) field of your helicopter to the end of the button id:

{% for h in helicopters %} <div class="btn-group" id="remove-heli-{{h.pk}}"> <button type="button" class="btn btn-default" onclick='my_func("{{ h.pk }}")'> {{ h }} </button> </div> {% endfor %} function my_func(h_id) { document.getElementById('remove-heli' + h_id).style.visibility = 'hidden'; }

So, now each button has its own id made unique by the database id of the helicopter, and that same database id is passed to my_func() so that it knows which helicopter to hide.

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.