Modal window to create new record

Navigation
0

I'm trying to implement a modal window like Django does with the + sign, I already see the modal window but I have a problem I do not know how to load the froms.py since I do not have the text box.

I already have in a part of the menu the option of New Student with a url and AlumnoForm.py where I use the (forms.ModelForm) and everything works well ..

What are the steps to follow to make this work? I have to create some Ajax to load the form?

Someone who can guide me how to do this ..

Thank you.

Modal template code 

<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>
    
asked by Tony 18.08.2016 в 01:57
source

2 answers

0

Effectively you have to use an Ajax request. I recommend you use JQuery for this.

Additionally, you must create a view that will receive the form data. In this view you will receive each of the fields and save them in your model. Then you can return a JSON with error or success information, so you can update your window.

Simple example, you can improve it: 

<!-- 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>

The modal contains a form with a field named 'alumno_nombre' and '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>

We do the post to the url and show on screen the message that Django returned to us. 

#models.py
from django.db import models

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

Example of the model. 

# 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')

Here we do the student's save. And Django will return a JSON object with the success or error message.

    
answered by 18.08.2016 / 23:32
source
0

In Bootstrap, modal windows exist before hidden from the moment the page is loaded. When active are not created , they are only displayed.

That said, in your modal window, you prepare the form, thinking that the form will be created by clicking on the plus sign, but you are creating the form with the variable form , but that variable contains the Form of New attention and not that of New student.

So you can view the New Student form, you have to send it to your form or upload it to your modal from an external file.

Remember that if you choose to send it to your form, you should send it with another variable, for example form2 . With the external load, you would have no problem, consult the documentation: link .

    
answered by 18.08.2016 в 02:07
How do I get the correct measurements of an image using javascript? problems when updating from an array in mongo and nodejs using async