时间戳

首页 > 解决方案 > 如何将参数传递给 Bootstrap 模式？

javascript - 如何将参数传递给 Bootstrap 模式？

问题描述

在开发网站时，我遇到了这个问题：

我有一个使用 for 循环创建的面板电影列表，每个电影都有一个“删除”按钮。每个删除按钮都有一个唯一的 ID（我的数据库中的电影 ID）。

我需要使用 AJAX 将该 ID 发送到在 Django 中开发的后端。我怎样才能做到这一点？

这是我用于创建电影面板列表的 HTML 代码：

<ul>
        {% if film_list %}
        {% for film in film_list %}
                <li class="list-group-item">
                        <div class="row">
                                <div class="col-md-3 col-xs-3 col-sm-3 col-xl-3 name">
                                        <img width="50" height="50" src= {{ film.poster }} alt= {{ film.title }}>
                                        <strong> {{ film.title }} </strong>
                                </div>
                                <div class="col-md-9 col-xs-9 col-sm-9 col-xl-9">
                                        <div class= "col-md-4 col-xs-4 col-sm-4 col-xl-4">
                                                <button id = "{{ film.id }}" class="btn boton-delete" data-toggle="modal" data-target=".modal-delete">
                                                        <span class=" glyphicon glyphicon-trash delete"></span>
                                                        Borrar película
                                                </button>
                                        </div>
                                </div>
                        </div>
                </li>
        {% endfor %}
        {% endif %}
</ul>

这是模态的HTML代码：

<div class="modal fade modal-delete" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">¿Está seguro de que quiere borrar esta película?</h4>
                </div>
                <div class="modal-footer">
                    {% csrf_token %}
                        <button type="submit" class="btn btn-success modal-btn-si">Si</button>
                        <button type="submit" data-dismiss="modal" class="btn btn-danger modal-btn-no">No</button>
                </div>
            </div>
        </div>
    </div>

标签： javascriptjqueryhtmldjango

解决方案

Viendo que eres español me adato a tu idioma。

Al botón que abre el modal, yo le quitaba la apertura mediante propiedades para gestionarlo desde jquery:

<button id = "{{ film.id }}" class="btn boton-delete"<span class=" glyphicon glyphicon-trash delete"></span>Borrar película</button>

Para iniciar el borrado tienes que hacerlo con javascript/jquery, es decir:

<script>
    var id;
    $(".boton-delete").on('click', function(e){
        $("#id_modal").modal();
        id = this.id;
    });

    $("#id_boton_confirmacion").click(function(e){
        $("#id_modal").modal('hide');
        // Realizar llamada AJAX pasandole la variable id
    });
</script>

Respecto a los botones del modal tienes que quitarle la submitpropiedad pues no hay formulario, sería:

<button type="button" class="btn btn-success modal-btn-si">Si</button>
<button type="button" data-dismiss="modal" class="btn btn-danger modal-btn-no">No</button>

推荐阅读