0

Estoy tratando de implementar una ventana modal como lo hace Django con el signo +, Ya me aparece la ventana modal pero tengo un problema no se como cargar el froms.py pues no tengo la caja de texto. introducir la descripción de la imagen aquí

Ya tengo en una parte del menu la opcion de Nuevo Alumno con una url y AlumnoForm.py donde utilizo el (forms.ModelForm) y todo funciona bien..

Cuales son los pasos a seguir para que esto funcione.? tengo que crear algun Ajax para cargar el formulario ?

Alguien que me pueda orientar como hacer esto..

Gracias.

Codigo del template modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
                   Alumno Nuevo
                </h4>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">

        <form class="form-horizontal" role="form" method='POST' action="/addalumno/">
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="form-group">
                <label for="nombre" class="hidden-xs col-sm-2">Nombre:</label>
                <div class="col-sm-10">
                  {{form.nombreAlumno}} {{form.nombreAlumno.errors}}
                </div>
              </div>
              <div class="form-group">
                <label for="sexo" class="hidden-xs col-sm-2">Sexo:</label>
                <div class="col-sm-10">
                  {{form.sexo}} {{form.sexo.errors}}
                </div>
              </div>

              <div class="form-group">
                <label for="coloniaal" class="hidden-xs col-sm-2">Colonia Alumno:</label>
                <div class="col-sm-10">
                  {{form.coloniaal}} {{form.coloniaal.errors}}
                </div>
              </div>
              <div class="form-group">
                <label for="callenumal" class="hidden-xs col-sm-2">Calle Alumno:</label>
                <div class="col-sm-10">
                  {{form.callenumal}} {{form.callenumal.errors}}
                </div>
              </div>
              <div class="form-group">
                <label for="localidadal" class="hidden-xs col-sm-2">Localidad Alumno:</label>
                <div class="col-sm-10">
                  {{form.localidadal}} {{form.localidadal.errors}}
                </div>
              </div>
            </div>
            <!-- class="col-xs-12 col-sm-6" -->

            <div class="col-xs-12 col-sm-6">
              <div class="form-group">
                <label for="discapacidad" class="hidden-xs col-sm-2">Discapacidad:</label>
                <div class="col-sm-10">
                  {{form.discapacidad}} {{form.discapacidad.errors}}
                </div>
              </div>

              <div class="form-group">
                <label for="escolaridad" class="hidden-xs col-sm-2">Escolaridad:</label>
                <div class="col-sm-10">
                  {{form.escolaridad}} {{form.escolaridad.errors}}
                </div>
              </div>
            </div>
            <!-- class="col-xs-12 col-sm-6" -->
          </div>
          <!--<div class="row"> -->
        </form>
      </div>

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Cerrar
        </button>
        <button type="button" class="btn btn-primary">
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>

2 respuestas 2

0

Efectivamente tienes que utilizar una petición Ajax. Te recomiendo utilices JQuery para esto.

Adicionalmente deberás de crear una vista que recibirá los datos del formulario. En esta vista recibiras cada uno de los campos y los guardaras en tu modelo. Luego puedes devolver un JSON con informacion de error o exito, para que puedas actualizar tu ventana.

Ejemplo sencillo, puedes mejorarlo:

<!-- En tu archivo html -->

<div id="modal">
    <form id="formulario">
        <input type="text" name="alumno_nombre"></input>
        <input type="text" name="alumno_apellido"></input>
    </form>
</div>

El modal contiene un formulario con un campo llamado 'alumno_nombre' y 'alumno_apellido'

<script>
    var nombre_alumno = $('input[name="alumno_nombre"]').val();
    var apellido_alumno = $('input[name="alumno_apellido"]').val();

    $.post("/alumno/nuevo_alumno", { nombre: nombre_alumno, apellido: apellido_alumno } )
        .done(function( data ) {
            alert( data.mensaje );
        });
</script>

Hacemos el post a la url y mostramos en pantalla el mensaje que nos devolvió Django.

#models.py
from django.db import models

class Alumno(models.Model):
    nombre = models.CharField(max_length=100)
    apellido = models.CharField(max_length=100)

Ejemplo del modelo.

# views.py
from app.models import Alumno
from django.http import HttpResponse
import json

def nuevo_alumno(request):
   nombre_alumno = request.POST.get('nombre', None)
   apellido_alumno = request.POST.get('apellido', None)

   try:
       alumno = Alumno(nombre = nombre_alumno, apellido = apellido_alumno)
       alumno.save()
       return HttpResponse(json.dumps({"mensaje": "Alumno guardado exitosamente."}), content_type='application/json')
   except:
       return HttpResponse(json.dumps({"mensaje": "ERROR"}), content_type='application/json')

Aquí hacemos el guardado del alumno. Y Django te devolverá un objeto JSON con el mensaje de éxito o error.

2
  • Hola Fermin, gracias por tu ayuda, No me queda muy claro, que el modal contiene un formulario. con un campo llamado tu_dato. En este ejemplo debo crear un forms.py con solo un campo que es 'tu_dato' .?
    – Tony
    el 19 ago. 2016 a las 2:12
  • Hola Tony, fue error mio. ya corregí la respuesta en vez de 'tu_dato' es 'alumno_nombre'. Dentro del modal puedes crear tu formulario con los campos donde vas a ingresar la informacion de tu nuevo alumno. Esto lo puede hacer utilizando el generador de formularios de Django o bien puedes escribirlo tu manualmente. Yo prefiero manual ya que tengo mas control sobre el código. Luego sustraes el valor de cada campo y lo mandas en el $.post. el 19 ago. 2016 a las 23:43
0

En Bootstrap las ventanas modales existen antes ocultas desde el momento en que se carga la página. Cuando las activas no se crean, solo se muestran.

Dicho esto, en tu ventana modal, preparas al formulario, pensando en que se va a crear el formulario al hacer clic en el signo de más, pero estás creando el formulario con la variable form, pero esa variable contiene el formulario de Nueva atención y no el de Nuevo alumno.

Para que puedas visualizar el formulario de Nuevo alumno, tienes que enviarlo a tu formulario o cargarlo a tu modal desde un archivo externo.

Recuerda que si eliges enviarlo a tu formulario, debes enviarlo con otra variable, por ejemplo form2. Con la carga externa, no tendrías problema, consulta la documentación: http://getbootstrap.com/javascript/#modals-options.

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.