0

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:

introducir la descripción de la imagen aquí

pero cuando encuentra errores como de campos unique me pasa esto:

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

5
  • Saludos, mira el problema surge en que no estas incluyendo las librerias de bootstrap en tu template(estudiante_form).. tal como lo haces en estudiante_list, debes incluirlas... o a su vez extenderlas...es por eso que no se aplica estilos ni se visualizar la modal... Commented el 2 oct. 2018 a las 15:05
  • @Tegito123 el modal si se me visualiza (primera imagen) correctamente porque ya esta extendí las librerias de la base pero cuando se genera un error en el formulario es que se me daña Commented el 2 oct. 2018 a las 15:08
  • podrias dar click derecho..ver codigo..fuente.. sobre tu template a lo que se presenta dicho error para ver que cargue bien todas las librerias de bootstrap... y confirmar que si esta bien armado tu template..!! Commented el 2 oct. 2018 a las 15:14
  • @Tegito123 listo, si quieres mira la actualización que hice el post, agegue una imagen donde se ven las librerias Commented el 2 oct. 2018 a las 15:28
  • me referia a la estructura de tu template donde se produce el error ..justo donde no carga la modal: i.sstatic.net/3ybac.png Commented el 2 oct. 2018 a las 15:29

1 respuesta 1

0

Tiene pinta de ser un fallo más conceptual: tu template estudiante/estudiante_form.html no es en realidad un template útil para ponerlo en la configuración de la vista EstudianteCreateView, sino que es, efectivamente, un modal.

Lo que tú haces según entiendo es:

  • Vas al EstudianteList.
  • En este listado permites al usuario hacer clic para crear un estudiante nuevo.
  • Al hacer click el usuario, le cargas el modal via bootstrap.

Hasta aquí está todo bien. El problema es que tu EstudianteCreateView, al recibir el formulario y ver que hay un problema en los datos, no te carga estudiante_list.html y luego tu modal, si no que te carga el modal directamente como si fuera un template completo.

No sé si hasta aquí me he explicado, pero te aporto dos soluciones:

  1. Haces la comprobación via jQuery antes de enviar el formulario. Sería como la comprobación del Nombre, que es required y se hace antes de enviar el formulario, sólo que en este caso lo tendrías que comprobar tú a manita, consultando la preexistenia de otro usuario con el mismo correo electrónico via ajax.

  2. Haces un template nuevo, que sea un formulario hecho y derecho, no un modal, donde puedas retornar al usuario que ha enviado un formulario inválido, y lo pones como template_name de tu EstudianteCreateView.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.