我试图用django变量将数据显示到模态体中。我对ajax和django很在行。ajax函数传递Galeria对象的id,然后视图返回带有数据的JsonResponse。莫代尔为什么不获取数据?如果I console.log也打印数据,但是当我尝试通过django变量传递数据时,模式显示为空。我做错了什么
我的观点
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
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(请参阅ajax函数和id='modal\u info\u galeria'的modal)
<!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函数中解决了这个问题:
由此:
为此:
这很明显,我不敢相信我是个傻瓜。我试图用数据粘贴html,而不是将数据传递给元素
问题解决了
相关问题 更多 >
编程相关推荐