Confirmation Modal with Django

Question

I’m on my first project in Django and I’m having a hard time making a confirmed modal before deleting the record. When I press the YES button it does not direct to my URL {% url 'apiDelete' api.id %}. If you can shed some light on where I’m going wrong, I’d appreciate it!

{% for api in apis %}
              <ta>
                <tr class="gradeX">
                  <td class="center">{{ api.nome_erp_verbose }}</td>
                  <td>{{ api.descricao }}</td><!--
                  <td>{{ api.app_key }}</td>
                  <td>{{ api.app_secret }}</td>  -->
                  <td class="taskOptions">
                    <a href="{% url 'apiUpdate' api.id %}" class="tip-top" data-original-title="Editar"><i class="icon-ok"></i></a>
                    <a href="#myAlert" class="tip-top" data-toggle="modal" data-original-title="Excluir"><i class="icon-remove"></i></a>
                    <div id="myAlert" class="modal hide">
                      <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button">×</button>
                        <h3>Atenção!</h3>
                      </div>
                      <div class="modal-body">
                        <p>Esta operação é irreversível. Excluir ?</p>
                      </div>
                      <div class="modal-footer">
                        <a data-dismiss="modal" class="btn" href="{% url 'apiDelete' api.id %}">Sim</a>
                        <a data-dismiss="modal" class="btn" href="#">Não</a>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>

Answer 1

Good, I implemented days ago and I did not find a very direct solution, had to be with a hack, but I share and decide if it resolves for you.

confirm_delete_modal.html

<!-- Confirm detele Modal-->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="confirmDeleteModalLabel">Atenção!!</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">Tem mesmo a certeza que pretende eliminar este registo?</div>
        <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Não</button>
            <a class="btn btn-danger" id="confirmDeleteId" href="#">Sim</a>
        </div>
        </div>
    </div>
</div>

index.html

% include 'modal/confirm_delete_modal.html' %}

<script> 
$(document).ready(function () {
        $('#confirmDeleteModal').on('show.bs.modal', function (e) { // executs when the modal opens
            var url = $(e.relatedTarget).data("id"); // gets data-id from the clicked button
            $("#confirmDeleteId").attr("href", url)
        }).on('hide.bs.modal', function (e) { // when modal closes
            $("#confirmNo").off(); // canceles the click event in button "no"
        });
});
</script>

delete button

<div class="btn-group" role="group" aria-label="Basic example"><a href="#" data-id="/delete/%s" data-toggle="modal" data-target="#confirmDeleteModal" class="btn btn-danger"><i class="fa fa-trash"></i></a></div>

NOTE: the data-id="url " will be your modal url upload engine. I implemented based on this Source.