gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:36:25 26 4
gpt4 key购买 nike

在开发网站时,我遇到了这样的问题:

我有一个面板电影列表,使用 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>

最佳答案

Viendo que eres español me Adapto a tu idioma.

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

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

关于 javascript/jquery 的起始信息,如下:

<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 propiedad submit 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>

关于javascript - 如何将参数传递给 Bootstrap 模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56273371/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com