CODEWITHSUNDEEP
djangotwitter-bootstrapdjango-formsdjango-crispy-forms
Joseleg
Joseleg

Reputation: 393

how to render a djangoform into bootstrap modal window

I am strating to learn Django and I want to display some forms in bootstrap modal view. I have a template with a HTML table, this table have a column with a drop down button with several options. the table is rendered with django-tables2 and the forms are rendered with django-crispy-forms

My form definition for the modal form:

class RecepcionForm(forms.ModelForm):
    fecha_recepcion = forms.DateField(widget=DateInput())
    def __init__(self,*args,**kwargs):
       super(RecepcionForm,self).__init__(*args,**kwargs)
       self.helper = FormHelper(self)
       self.helper.layout = Layout(
            Field('id_proveedor',
                  'anio',
                  'mes',
                  'usuario',
                  readonly = True
             ),
            Fieldset('',
                     'fecha_recepcion',
                     'num_archivos',
                     Submit('save','Grabar'),
                     HTML('<a class="btn btn-danger" href={% url "monitor" %}>Cancelar</a>')
            )
       )
    class Meta:
       model = DetalleRecepcion

My view for the modal form:

@login_required(login_url='/login/')
def RecepModalView(request):
    idp = request.GET.get('i')
    anio = request.GET.get('a')
    mes = request.GET.get('m')
    if request.method == 'POST':
       r = DetalleRecepcion.objects.get(id_proveedor=idp,anio=anio,mes=mes)
       form = RecepcionForm(request.POST, instance=r)
       if form.is_valid():
          form.save()
          return HttpResponseRedirect('/monitor/')
    else:
       r = DetalleRecepcion.objects.get(id_proveedor=idp,anio=anio,mes=mes)
       r.usuario = request.user
       form = RecepcionForm(instance=r)

    return render_to_response('recepmodal.html',
                              {'form':form},
                              context_instance=RequestContext(request))

My template for the modal form

{% load crispy_forms_tags %}
<div class="modal fade" id="recmodal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Register </h4>
      </div>
      <div class="modal-body">
        <form action="" method=post">
         <div class="tab-content">
           <div class="tab-pane active" id="tab1">

    {% crispy form %}

           </div>
         </form>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Submit</button>

      </div>
    </div>
  </div>
</div>

I don't know how to open and pass arguments to the modal form.

I try using the django tag include Example snippet:

<body>
<table>
.
.
.
</table>

{% include 'recmodal.html' %}

</body>

but I get this error Exception Value: Failed lookup for key [form] in

In simple word how can I pass values and open a bootstrap modal form in django using django-crispy-forms.

Any advice

Thansk in advance

Upvotes: 0

Views: 2792

Answers (1)

Josh Rodr&#237;guez
Josh Rodr&#237;guez

Reputation: 81

I know it's too late to answer, but I render my forms in a modal using this into a "modal-body" tag:

<form method="post">
    {% csrf_token %}
    {% form.as_p %}
</form>

I hope this work for all people like me that we came here finding an answer.

Regards.

Upvotes: 2

Related Questions