[英]How can I pass a parameter to a Bootstrap modal?
While developing a website, I've encountered this problem: 在开发网站时,我遇到了这个问题:
I've a list of panels movies, created using a for loop, and each one of them has a "Delete" button. 我有一个使用for循环创建的面板影片的列表,每个面板影片都有一个“删除”按钮。 Each delete button has an unique id (movie id in my database).
每个删除按钮都有一个唯一的ID(我数据库中的电影ID)。
I need to send that id to the backend, developed in Django, using AJAX. 我需要使用AJAX将该ID发送到Django开发的后端。 How can I achieve this?
我该如何实现?
Here is my HTML code for creating the movie panel list: 这是我用于创建电影面板列表的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>
And here is the HTML code of the modal: 这是模式的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">×</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. Viendo que eresespañolme Adapto a tu idioma。
Al botón que abre el modal, yo le quitaba la apertura mediante propiedades para gestionarlo desde jquery: Albotónque abre el莫代尔,您在quitata la apertura的中位数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: javascript / jquery和es的Para iniciar el borrado tienes que hacerlo con:
<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: 在洛杉矶波多黎各的莫代尔·蒂恩·奎塔尔勒·拉·皮皮埃达德的遗书
submit
没有干草的配方,塞尔维亚:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.