Django pop-up Multiple Checkbox form using colorbox
I recently had the chance to play with colorbox, which is a lightweight customizable lightbox plugin for jQuery. I needed my django form to be a pop up and I did not want to change a lot of stuff I had already written. Here are some of my notes on how i got it to work .
My form was working perfectly, all i needed to do now was to make it a pop up and handle all the errors and success page in the pop up itself. Thankfully colorbox can be extended with callbacks and event-hooks without altering the source files. Also, its appearance is controlled through CSS so users can restyle the box.
All I needed to do was write some very basic html for the form.
In the form's view you do not need to pass another instance of the form to catch the errors as well. All you need to do is write some custom code for when the form is saved successfully and when it has errors. Here I am using my custom JsonResponse to render into string an html file that contains all the results when the form is succesfully saved. After the form is saved it will send a html/text with the custom email contents to the pop up form. Similary when the form has errors, I am using the output from JsonResponse to catch the errors and am sending to the pop-up form in the same way.
In your template, you basically do callback and saying that if the form saved succesfully, send the success response as dictated by the view.
For some reason, colorbox did not like that I was using the CheckboxSelectMultiple widget, and when i tried to render the form in the template as {{ form }}, it would not output anything. To go around this issue, I tried to solve it manually. I looped through the field id and field label and setup the input type to what i wanted, and it was all good. {% for username_id, username_label in iform.username.field.choices %} {{username_label}} {% endfor %}