Question

I have this html section in my page code:

          </tr>
      {% for sens in sensors %}
      <td>
        <div class="sens_id">
          {{ sens.id }}
        </div></td>
      <td>
        <div class="sens_edit">
          <a href="/networks/{{ net.id }}/sensors/edit?id={{ sens.id }}"><i class="icon-pencil"></i></a>
        </div></td>
      <td>
        <div class="modal hide" id="myModal">
          <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Are you sure you want delete " {{ sens.name }} " ?</h3>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="/networks/{{ net.id }}/sensors/delete?id={{ sens.id }}" class="btn btn-primary">Delete</a>
          </div>
        </div>


        <a data-toggle="modal" href="#myModal"><i class="icon-trash"></i></a>
    </div></td>

This code, for every sensor that is in my net, make a table with name of the sensor, link to the edit page and trash icon to delete the sensor.

But this link

<a href="/networks/{{ net.id }}/sensors/delete?id={{ sens.id }}" class="btn btn-primary">Delete</a>

delete always the first sensor of the list, like if sens.id is always the same. If the sensors are for ex. 200, the modal plugin associated to the trash icon delete always the sensor at the top of the list.

Is this a bug of twitter bootstrap? How can I fix this?

Thank you very much.

Answer 1

id is unique across your document, thus by repeating the same id for all of the different modal dialogs there is no way to differentiate which one you open when you click the trash icon.

You need a unique id for every modal dialog.

<div class="modal hide" id="myModal_{{ sense.id }}">

and

<a data-toggle="modal" href="#myModal_{{ sense.id }}"><i class="icon-trash"></i></a>