为什么Bootstrap4模态在我的Django模板中不显示数据? [英] Why Bootstrap4 modal doesn't show data in my Django Template?
本文介绍了为什么Bootstrap4模态在我的Django模板中不显示数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用django变量将数据显示到模式主体中.我对ajax和jango非常陌生.ajax函数传递Galeria对象的ID，然后视图返回带有数据的JsonResponse.为什么模态不获取数据?如果我使用console.log，它也会打印数据，但是当我尝试通过django变量传递数据时，模式显示为空.我在做什么错了?
I'm trying to display data into the modal body with django variables. I'm very noob at ajax and django. The ajax function passes the id of the Galeria object and then the view returns a JsonResponse with the data. Why the modal is not taking the data? If I console.log it prints the data as well, but when I try to pass the data via django variables, the modal shows empty. What am I doing wrong?
我的views.py
My views.py
def get_galeria(request):
galeria = Galeria.objects.get(id=int(request.GET['ajax_galeria']))
print(galeria.id)
context = {}
context['galeriaID'] = galeria.id
context['galeriaNombre'] = galeria.nombre
return JsonResponse(context, safe=False)
models.py
models.py
class Galeria(models.Model):
uuid = models.CharField(unique=True, max_length=36, blank=True, null=True)
usuario_creador = models.ForeignKey('Usuario', on_delete=models.CASCADE, db_column='usuario_creador', blank=True, null=True, related_name='galerias_usuariocreador')
usuario_auditor = models.ForeignKey('Usuario', on_delete=models.CASCADE, db_column='usuario_auditor', blank=True, null=True, related_name='galerias_usuarioauditor')
nombre = models.CharField(unique=True, max_length=100)
ruta = models.ImageField(upload_to=settings.MEDIA_ROOT, unique=True, max_length=255)
es_imagen = models.IntegerField()
es_video = models.IntegerField()
es_audio = models.IntegerField(blank=True, null=True)
auditada = models.DateTimeField(blank=True, null=True)
descripcion = models.TextField(blank=True, null=True)
modificado = models.DateTimeField(blank=True, null=True)
eliminado = models.IntegerField(blank=True, null=True)
tipo = models.CharField(max_length=10, blank=True, null=True)
grupo = models.ForeignKey('Grupo', on_delete=models.CASCADE, db_column='grupo', blank=True, null=True, related_name='galerias_grupo')
fecha_creacion = models.DateField(auto_now_add=True, blank=True, null=True)
def __str__(self):
return self.nombre
class Meta:
managed = True
db_table = 'galeria'
index.html(请参阅id ='modal_info_galeria'的ajax函数和模态)
index.html (see ajax function and modal with id='modal_info_galeria')
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" href="/static/css/style.css">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Google Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700&display=swap" rel="stylesheet">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<section class="contenedor" id="sidemenutrans">
<!-- Header Grid -->
<div class="header-bar">
<!-- Header Title -->
<div class="title-section">
Galeria de Medios
</div>
<!-- Header Navbar -->
<nav class="navbar navbar-expand-lg navbar-light navbar-edited">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<i class="material-icons" style="font-size:30px;cursor:pointer" onclick="openNav()">
menu
</i>
<!-- Sidebar Menu -->
<div id="mySidenav" class="sidenav">
<div class="profile-cont">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="profile-img"></a></div>
<div class="username">{{ user }}</div>
<div class="profile-bg"></div>
</div>
<!-- Items, secciones administrativas links -->
<section class="menu-section">
<a href="{% url 'index' %}" class="menu-option"><i class="material-icons icon-menu">insert_photo</i> Galeria</a>
<a href="{% url 'pantallas' %}" class="menu-option"><i class="material-icons icon-menu">personal_video</i>Pantallas</a>
</section>
</div>
<!-- Header - Navbar Content -->
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="submit" form='form_filter_galerias' class="btn btn-secondary">
FILTRAR
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<!--DROPDOWN FILTROS-->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!--FORMULARIO DE FILTROS-->
<form action='{% url "filtrar_galerias" %}' method='POST' id='form_filter_galerias'>
{% csrf_token %}
<h6 class="dropdown-header">Tipos de Archivo</h6>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Imagenes' checked>Imagenes
</label>
</div>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Videos'>Videos
</label>
</div>
<div class="form-check disabled; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Audios' disabled>Audios
</label>
</div>
<!--SEPARADOR DROPDOWN-->
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Filtrar por:</h6>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_otros" value='Autor'>Autor
</label>
</div>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_otros" value='Fecha_asc'>Fecha ASC
</label>
</div>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="filter_otros" value='Fecha_desc'>Fecha DESC
</label>
</div>
<div class="form-check; dropdown-item">
<label class="form-check-label">
<input type="text" class="col-12 form-check-input" name="filter_grupo" placeholder="Grupo...">
</label>
</div>
</form>
</div>
</div>
</li>
<!-- Button Subir Archivo (Modal) -->
<li style='padding-left: 5px;'>
<button type="button" class="btn btn-primary" id="UploadButton" data-toggle="modal"
data-target="#staticBackdrop">Subir Archivo</button>
</li>
</ul>
<!-- Formulario de Busqueda de Galerias -->
<form class="form-inline my-2 my-lg-0" action='{% url "buscar_galerias" %}' method='GET'>
<input class="form-control mr-sm-2" type="search" placeholder="Buscar galerias" aria-label="Search" name='search'>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
</div>
<!-- Modal Subir Archivo -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Subir Archivo - Header -->
<div class="modal-header border-0">
<h5 class="modal-title" id="staticBackdropLabel">Subir Contenido</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Modal Subir Archivo - Drag & Drop Body -->
<div class="modal-body dad-container">
<div class="caption-info">
<i class="material-icons md-48 caption-sign">add</i>
<p class="caption-text">Drag & Drop Files Here</p>
</div>
</div>
<!-- Modal Subir Archivo - Footer Browser -->
<div class="modal-footer border-0 footer-edited">
<!-- FORMULARIO CREAR GALERIA -->
<form method='POST' enctype="multipart/form-data" action='{% url "crear_galeria" %}'>
{% csrf_token %}
<div class="custom-file">
<input type="file" class="custom-file-input browse-file" id="customFile" name='Galeria_ruta' required>
<label class="custom-file-label" for="customFile">Elegir archivo...</label>
</div>
<button type="submit" class="btn btn-outline-success">Subir Archivo</button>
</form>
</div>
</div>
</div>
</div>
<!-- Media Content Container -->
<div class="content">
<!-- Recorrer las galerias -->
{% for g in galerias %}
<!-- Si la galeria es imagen, crear container de imagen -->
{% if g.es_imagen == 1 %}
<!-- Container de Imagen -->
<div class="img-container">
<img id="img-content" src="{{g.ruta.url}}">
<p>{{galeriaID}}</p>
<!-- Formulario para Borrar Galeria Imagen -->
<form method='POST' action='{% url "borrar_galeria" %}' id='form_borrar_galeria'>
{% csrf_token %}
</form>
<!-- Formulario para Obtener la Galeria (para ser usada en una modal)-->
<form id='form_get_galeria'>
{% csrf_token %}
</form>
<input type="radio" class="form-check-input" name="selected_galeria" id='selected_galeria' form='form_borrar_galeria' value="{{g.id}}">
</div>
<!-- Si la galeria es video, crear container de video -->
{% elif g.es_video == 1 %}
<div class="img-container">
<!-- Container de Video -->
<video id='img-content' controls>
<source src="{{g.ruta.url}}" type="video/mp4" media="screen and (min-width:320px)">
<source src="{{g.ruta.url}}" type="video/ogg" media="screen and (min-width:320px)">
<source src="{{g.ruta.url}}" type="video/avi" media="screen and (min-width:320px)">
<source src="{{g.ruta.url}}" type="video/wav" media="screen and (min-width:320px)">
<source src="{{g.ruta.url}}" type="video/mkv" media="screen and (min-width:320px)">
<source src="{{g.ruta.url}}" type="video/ogg" media="screen and (min-width:320px)">
Su navegador no soporta contenido multimedia.
</video>
<!-- Formulario para Borrar Galeria Video -->
<form method='POST' action='{% url "borrar_galeria" %}' id='form_borrar_galeria'>
{% csrf_token %}
</form>
<!-- Formulario para Obtener la Galeria (para ser usada en una modal)-->
<form id='form_get_galeria'>
{% csrf_token %}
</form>
<input type="radio" class="form-check-input" name="selected_galeria" form='form_borrar_galeria' value="{{g.id}}">
</div>
{% endif %}
<!-- Si no hay galerias, imprimir este tag -->
{% empty %}
<h1 style='color:red'>No hay galerias disponibles. Presione Subir Archivo para agregar una galeria.</h1>
{% endfor %}
</div>
<div class="modal fade" id="modal_galeria_info" tabindex="-1" role="dialog" aria-labelledby="modal_galeria_infoLabel" aria-hidden="true" style='display: none;'>
<div class="modal-dialog" role="document" id='datos'>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_galeria_infoLabel">Detalles de la Galeria</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id='modal_galeria_body'>
<p>{{galeriaNombre}} {{galeriaID}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Media Content Container - Delete Galeria Button -->
<button type="submit" class="btn btn-danger delete-btn" form='form_borrar_galeria'>
<i class="material-icons">delete</i>
</button>
<button type="submit" id='info_btn_galeria' class="btn btn-info info-btn" form='form_get_galeria' onclick="get_galeria_details()" data-toggle="modal" data-target="#modal_galeria_info">
<i class="material-icons">info</i>
</button>
<div id='modal-div' name='modal-div'></div>
</section>
<!-- Off Canvas Menu Java Script -->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("sidemenutrans").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("sidemenutrans").style.marginLeft = "0";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script>
// Submit post on submit
$('#form_get_galeria').on('submit', function(event){
event.preventDefault();
//get_galeria_details();
});
// AJAX for posting
function get_galeria_details() {
console.log('get galeria details function running');
$.ajax({
url : "{% url 'obtener_galeria' %}", // the endpoint
type : "GET", // http method
//dataType: "json",
//async: true,
data : {
csrfmiddlewaretoken: '{{ csrf_token }}',
ajax_galeria: $("input[type=radio][name=selected_galeria]:checked").val()
}, // data sent with the post request
// handle a successful response
success : function(data, response) {
//$('#selected_galeria').val(''); // remove the value from the input
console.log(data);
$(".modal-body").html(data);
document.getElementById('modal_galeria_info').style.display='block';
},
// handle a non-successful response
error : function(xhr,errmsg,err) {
//$('#comment-form').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>×</button>Oop! Error happend!</div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
}
</script>
</body>
</html>
推荐答案
我在ajax函数中解决了此问题:
I solved my problem doing this in the ajax function:
从这里:
// handle a successful response
success : function(data, response) {
//$('#selected_galeria').val(''); // remove the value from the input
console.log(data);
$(".modal-body").html(data);
document.getElementById('modal_galeria_info').style.display='block';
},
对此:
// handle a successful response
success : function(data, response) {
//$('#selected_galeria').val(''); // remove the value from the input
console.log(data.galeriaID);
document.getElementById('gg').innerHTML = data.galeriaID;
},
这真的很明显，我简直不敢相信自己是个傻瓜.我试图将html与数据粘贴在一起，而不是将数据传递给元素.
It was really obvious and I can't believe I'm a fool. I was trying to paste html with the data, instead of passing data to the elements.
问题已解决.
这篇关于为什么Bootstrap4模态在我的Django模板中不显示数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
