tengo el siguiente problema y no lo he podido solucionar.
Tengo formularios de crear, eliminar y visualizar con modales de bootstrap en mi proyecto de django y me funcionan perfecto excepto cuando se encuentra errores de validación.
Este es mi modal y me valida los campos required sin ningún problema:
pero cuando encuentra errores como de campos unique me pasa esto:
por lo que puedo observar se me recarga el modal y me muestra la pagina donde esta el código html del modal limpio.
Quisiera que el error se mostrara abajo del campo pero en el mismo modal, sin que se me cerrara.
Anexo código de aplicación
Estructura el proyecto
urls.py
from django.urls import path
from .views import EstudianteCreateView, EstudianteUpdateView, EstudianteListView, EstudianteDetailView, EstudianteDelete
estudiante_patterns = ([
path('list/', EstudianteListView.as_view(), name='list'),
path('create/', EstudianteCreateView.as_view(), name='create'),
path('<int:pk>/', EstudianteDetailView.as_view(), name='detail'),
path('update/<int:pk>', EstudianteUpdateView.as_view(), name='update'),
path('delete/<int:pk>', EstudianteDelete.as_view(), name='delete'),
], 'estudiante')
models.py
from django.db import models
from programa.models import Programa
from semestre.models import Semestre
# Create your models here.
ESTADOS = (
(0,'Activo'),
(1,'Inactivo'),
(2,'Egresado'),
(3,'Graduado'),
)
TIPOS_DOCUMENTOS = (
(0,'Tarjeta de indentidad'),
(1,'Cédula'),
(2,'Pasaporte'),
(3,'Cédula extrangera'),
)
def custom_upload_to(instance, filename):
try:
old_instance = Estudiante.objects.get(pk=instance.pk)
old_instance.foto.delete()
return 'perfiles/' + filename
except:
return 'perfiles/' + filename
class Genero(models.Model):
nombre = models.CharField(verbose_name="Nombre", max_length = 200)
def __str__(self):
return self.nombre
class Estudiante(models.Model):
nombre = models.CharField(verbose_name="Nombres", max_length=200)
apellido = models.CharField(verbose_name="Apellidos", max_length=200)
tipo_documento = models.IntegerField(choices = TIPOS_DOCUMENTOS, default=1)
documento = models.CharField(verbose_name="Número de documento", max_length=200, unique=True)
celular = models.CharField(verbose_name="Celular", max_length=200, null=True, blank=True)
telefono = models.CharField(verbose_name="Telefono", max_length=200, null=True, blank=True)
genero = models.ForeignKey(Genero, verbose_name="Género", on_delete=models.CASCADE)
fecha_nacimiento = models.DateField(verbose_name="Fecha de nacimiento")
email = models.EmailField(verbose_name="Correo electronico", null=True, blank=True, unique=True)
direccion = models.CharField(verbose_name="Dirección", max_length=200, null=True, blank=True)
foto = models.ImageField(upload_to=custom_upload_to, null=True, blank=True)
programa = models.ForeignKey(Programa, on_delete=models.CASCADE)
estado =models.IntegerField(choices = ESTADOS, default=0)
semestre_inicio = models.ForeignKey(Semestre, on_delete=models.CASCADE)
def __str__(self):
return ('{} {}'.format(self.nombre, self.apellido))
def get_tipo_documento(self):
tipo = TIPOS_DOCUMENTOS[self.tipo_documento][1]
return tipo
forms.py
from betterforms.multiform import MultiModelForm
from caracterizacion.models import Caracterizacion
from caracterizacion.forms import CaracterizacionBetterForm
from .models import Estudiante
from django import forms
from django.forms.widgets import SelectDateWidget
class EstudianteForm(forms.ModelForm):
class Meta:
model = Estudiante
fields = ['nombre', 'apellido','tipo_documento', 'celular', 'telefono', 'genero', 'documento',
'fecha_nacimiento', 'email', 'direccion', 'foto', 'programa']
widgets = {
'nombre': forms.TextInput(attrs={'class':'form-control'}),
'apellido': forms.TextInput(attrs={'class':'form-control'}),
'tipo_documento': forms.Select(attrs={'class':'form-control'}),
'celular': forms.TextInput(attrs={'class':'form-control'}),
'telefono': forms.TextInput(attrs={'class':'form-control'}),
'genero': forms.Select(attrs={'class':'form-control'}),
'documento': forms.TextInput(attrs={'class':'form-control'}),
'fecha_nacimiento': forms.TextInput(attrs={'class':'form-control mydatepicker', 'placeholder':'dd/MM/yyyy'}),
'email': forms.TextInput(attrs={'class':'form-control'}),
'direccion': forms.TextInput(attrs={'class':'form-control'}),
'programa': forms.Select(attrs={'class':'form-control'}),
}
class EstudainteCaracterizacionModelForm(MultiModelForm):
form_classes = {
'estudiante': EstudianteForm,
'caracterizacion': CaracterizacionBetterForm,
}
views.py
from django.urls import reverse
from django.views.generic import CreateView, TemplateView
from django.views.generic.edit import UpdateView, DeleteView
from django.views.generic.list import ListView
from django.views.generic.detail import DetailView
from django.urls import reverse_lazy
from .models import Estudiante
from .forms import EstudainteCaracterizacionModelForm, EstudianteForm
# Create your views here.
class EstudianteDetailView(DetailView):
model = Estudiante
class EstudianteCreateView(CreateView):
template_name = 'estudiante/estudiante_form.html'
form_class = EstudainteCaracterizacionModelForm
success_url = reverse_lazy('estudiante:list')
def form_valid(self, form):
estudiante = form['estudiante'].save(commit=False)
caracterizacion = form['caracterizacion'].save(commit=False)
estudiante.semestre_inicio = caracterizacion.semestre
estudiante.save()
caracterizacion.estudiante = estudiante
caracterizacion.usuario = self.request.user
caracterizacion.save()
return super(EstudianteCreateView, self).form_valid(form)
class EstudianteUpdateView(UpdateView):
form_class = EstudianteForm
# template_name = 'estudiante/crear.html'
success_url = reverse_lazy('core:index')
class EstudianteListView(ListView):
model = Estudiante
class EstudianteDelete(DeleteView):
model = Estudiante
success_url = reverse_lazy('estudiante:list')
class SuccessView(TemplateView):
template_name = 'core/index.html'
estudiante_list.html
{% extends 'core/base.html' %}
{% block title %}Lista de estudiantes{% endblock %}
{% block titlulo_pagina %}Lista de estudiantes {% endblock %}
{% load static %}
{% block css %}
<link href="{% static 'core/assets/node_modules/datatables/media/css/dataTables.bootstrap4.css' %}" rel="stylesheet">
<link href="{% static 'core/assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.css' %}" rel="stylesheet"
type="text/css" />
{% endblock %}
{% block atras %}
<button onclick="return abrir_modal('{% url 'estudiante:create' %}')" type="button" class="btn btn-info d-lg-block m-l-15"><i
class="fa fa-plus-circle"></i> Crear
estudiante</button>
{% endblock atras %}
{% block content %}
<div class="card">
<div class="card-body">
<div class="table-responsive ">
<table id="myTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>Documento</th>
<th>Programa</th>
<th>Estado</th>
<th>Semestre de inicio</th>
<th>Caracterizaciones</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{% for estudiante in estudiante_list %}
<tr>
<td>
<b class="font-weight-bold">{{estudiante.nombre}} {{estudiante.apellido}}</b>
</td>
<td>{{estudiante.documento}}</td>
<td><b>{{estudiante.programa}}</b></td>
<td>
{% if estudiante.estado == 0 %}
<span class="label label-success label-rouded">Activo</span>
{% elif estudiante.estado == 1 %}
<span class="label label-danger label-rouded">Inactivo</span>
{% elif estudiante.estado == 2 %}
<span class="label label-warning label-rouded">Egresado</span>
{% elif estudiante.estado == 3 %}
<span class="label label-info label-rouded">Graduado</span>
{% endif %}
</td>
<td>{{estudiante.semestre_inicio}}</td>
<td><a href="{% url 'caracterizacion:list' estudiante.id %}" class="btn btn-block btn-success">
{{estudiante.caracterizacion_set.count}}</a>
</td>
<td class="text-center">
<div class="row">
<a onclick="return abrir_modal('{% url 'estudiante:detail' estudiante.id %}')" class="btn">
<span class="icon-eye font-weight-bold" data-toggle="tooltip" data-original-title="Ver"></span>
</a> <a style="color:crimson" onclick="return abrir_modal('{% url 'estudiante:delete' estudiante.id %}')"
class="btn">
<span class="icon-close font-weight-bold" data-toggle="tooltip" data-original-title="Eliminar"></span>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div id="popup" class="modal fade" role="dialog">
</div>
{% endblock %}
{% block scripts %}
<script>
$(function () {
$('#myTable').DataTable();
$(function () {
var table = $('#example').DataTable({
"columnDefs": [{
"visible": false,
"targets": 2
}],
"order": [
[2, 'asc']
],
"displayLength": 25,
});
// Order by the grouping
$('#example tbody').on('click', 'tr.group', function () {
var currentOrder = table.order()[0];
if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
table.order([2, 'desc']).draw();
} else {
table.order([2, 'asc']).draw();
}
});
});
});
// $('#example23').DataTable({
// dom: 'Bfrtip',
// buttons: [
// 'copy', 'csv', 'excel', 'pdf', 'print'
// ]
// });
$('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');
</script>
<script src="{% static 'core/assets/node_modules/datatables/datatables.min.js' %}"></script>
<script>
function abrir_modal(url) {
$('#popup').load(url, function () {
$(this).modal('show');
});
return false;
}
function cerrar_modal() {
$('#popup').modal('hide');
return false;
}
$(document).ready(function () {
var table = $('#tabla').dataTable({
"language": {
url: "/static/localizacion/es_ES.json"
}
});
});
</script>
<script src="{% static 'core/assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.js' %}"></script>
{% endblock %}
estudiante_form.html
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3>Crear estudiante</h3>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<!-- Cuerpo del modal -->
<form role="form" action="{% url 'estudiante:create' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-wrapper collapse in" aria-expanded="true">
<div class="panel-body">
<div class="col-md-12">
<div class="card border-dark">
<div class="card-body">
<!-- nombre y apellido -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nombre</label>
{{ form.estudiante.nombre }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Apellido</label>
{{ form.estudiante.apellido }}
</div>
</div>
</div>
<!-- FIN nombre y apellido -->
<!-- genero y fecha de nacimiento-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Genero</label>
{{ form.estudiante.genero }}
</div>
</div>
<div class="col-md-6">
<div class="form-group data-date-format=" dd-mm-yyyy"">
<label class="control-label">Fecha de nacimiento</label>
<div class="input-group">
{{ form.estudiante.fecha_nacimiento }}
{{ form.estudiante.fecha_nacimiento.errors }}
<div class="input-group-append">
<span class="input-group-text"><i class="icon-calender"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- FIN genero y fecha de nacimiento-->
<!--Tipo de documento y numero de docuemento-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Tipo de documento</label>
{{ form.estudiante.tipo_documento }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Número de documento</label>
{{ form.estudiante.documento }}
</div>
</div>
</div>
<!--FIN Tipo de documento y numero de docuemento-->
<!--Foto-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Foto</label>
{{ form.estudiante.foto }}
</div>
</div>
<!--FIN Foto-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card border-dark">
<div class="card-body">
<!-- Seccion de informacion de contacto -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-wrapper collapse in" aria-expanded="true">
<div class="panel-body">
<div class="form-body">
<!-- direccion y email-->
<div class="row">
<div class="col-md-6 ">
<div class="form-group">
<label>Dirección</label>
{{ form.estudiante.direccion }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Email</label>
{{ form.estudiante.email }}
<span class="error" style="color:red;">{{ form.estudiante.email.errors }}</span>
</div>
</div>
</div>
<!--FIN direccion y email-->
<!-- celular y telefono-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Celular</label>
{{ form.estudiante.celular }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Telefono</label>
{{ form.estudiante.telefono }}
</div>
</div>
</div>
<!--FIN celular y telefono-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fin seccion de contacto -->
</div>
</div>
</div>
<div class="col-md-12">
<div class="card border-dark">
<div class="card-body">
<!-- Sección de caracterizacion -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-wrapper collapse in" aria-expanded="true">
<div class="panel-body">
<div class="form-body">
<!-- direccion y email-->
<div class="row">
<div class="col-md-6 ">
<div class="form-group">
<label>semestre inicio</label>
{{ form.caracterizacion.semestre }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Tipo caracterizacion</label>
{{ form.caracterizacion.tipo }}
</div>
</div>
</div>
<!--FIN direccion y email-->
<!-- celular y telefono-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Programa</label>
{{ form.estudiante.programa }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Descripcion</label>
{{ form.caracterizacion.descripcion }}
</div>
</div>
</div>
<!--FIN celular y telefono-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FIN Sección de caracterizacion -->
</div>
</div>
</div>
</div>
<!-- FIN Cuerpo del modal -->
<div class="modal-footer">
<div class="col-lg-12 text-right">
<button type="submit" class="btn btn-success"> <i class="fa fa-check "></i> Guardar</button>
<button type="button" class="btn btn-default" onclick="return cerrar_modal()">Cancelar</button>
</div>
</div>
</form>
</div>
</div>
<script>
// Date Picker
jQuery('.mydatepicker, #datepicker').datepicker({
autoclose: true,
format: "dd/mm/yyyy",
todayHighlight: true
});
</script>
De antemano, Gracias.
actualización
esta es la página generada donde se encuentra el modal