Django CreateView form in modal not show

I have a simple CRUD for a table named Clasificacion. The problem is I would like use a Modal for insert record, but actually I don't use the Django form, instead I declared a normal form with all the fields one by one, but I would like use the From, but is not posible for me show the form content, instead the modal shows empty with the ok button.This table has a model declared as:

class Clasificaciones(models.Model):
    clasificacion=models.CharField(max_length=30)
    detalles=models.CharField(max_length=1000)

This is How I declared the ListView and the CreateView

class ClasificacionesListView(ListView):
    model = Clasificaciones
    template_name = 'clasificacion/index.html'
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['title'] = "Lista de clasificaciones"
        return context

class ClasificacionesCreateView(SuccessMessageMixin, CreateView):
    model = Clasificaciones
    form_class = ClasificacionesForm
    template_name = 'clasificacion/index.html'
    success_url = reverse_lazy('clasificaciones')
    success_message = "Insertado correctamente!!!!"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs) 
        return context

and this is the index.html with the modal. The modal is in other directory but not works if I put in the same index.html file

{% extends "starter.html" %}
{% block content %}
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
                <div class="pull-right">
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAddClasificacion">Nueva clasificación</button>
                </div>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </section>
      <section class="content">
        <div class="content-fluid">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Clasificaciones</h3>
                </div>
                <div class="card-body">
                  <table id="tablaClasificaciones" class="table table-bordered table-striped">
                      <thead>
                        <tr>
                          <th>Clasificación</th>
                          <th>Detalles</th>
                          <th></th>
                      </tr>
                      </thead>
                      <tbody>
                        {% for clasificacion in object_list %}
                        <tr>
                            <td>{{ clasificacion.clasificacion }}</td>
                            <td>{{ clasificacion.detalles }}</td>
                             <td>
                                <div>
                                    <!-- <a href="" class="btn btn-link text-info">Detalles</a>                                   -->
                                    <a href="{% url 'editar_clasificacion' pk=clasificacion.id %}" class="btn btn-link text-primary">Editar</a>
                                         <a class="btn btn-link" data-toggle="modal" data-target="#deleteClasificacionModal{{clasificacion.id}}"><span class="fas fa-trash text-danger"></a>
                                           {% include 'clasificacion/modals/delete_modal.html' %}                                       
                                 </div>
                            </td>
                        </tr>
                        {% endfor %} 
                      </tbody>
                      <tfoot>
                        <tr>
                          <th>Clasificación</th>
                          <th>Detalles</th>
                          <th></th>
                        </tr>
                      </tfoot>
                  </table>
                </div>
              </div>
              </div>
            </div>
          </div>
      </section>
</div>


{% include 'clasificacion/modals/add_modal.html' %}
  {% endblock %}

and the modal code, commented the inputs, this way works, but I would like use form

<div class="modal fade" id="modalAddClasificacion">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Adicionar clasificación</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <form id="addclasificacion" method="POST">
            {% csrf_token %}
               <div class="row">
                  {% for field in form.visible_fields %}
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{ field.label }}</strong>
                            {{ field }}
                        </div>
                    </div>
                  {%endfor%}
                  <!-- <div class="col-12">
                      <div class="form-group">
                          <strong>Clasificación:</strong>
                          <input type="text" name="clasificacion" class="form-control" placeholder="Clasificación">
                      </div>
                  </div>
                  <div class="col-12">
                      <div class="form-group">
                          <strong>Detalles:</strong>
                          <textarea class="form-control" style="height:150px" name="detalles" placeholder="Detalles"></textarea>
                      </div>
                  </div> -->
                  <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                          <button type="submit" class="btn btn-primary">Insertar</button>
                  </div>
              </div>
          </form>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

It not works because I must add to context variable the form, in this case the Form to Categoria model. Also I must add to Create form, because I don't use a create template. So this is the answer:

class ClasificacionesListView(ListView):
    model = Clasificaciones
    template_name = 'clasificacion/index.html'
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['title'] = "Lista de clasificaciones"
        context['form'] = ClasificacionesForm()#here the detail.
        return context

Back to Top