Django CrispyForms - Render every form of a formset in separate bootstrap tabs

Question

I would like to render each form of a formset in a different bootstrap3 tabs using django-crispyForms, but it seems to not be simple because crispyForms does not handle formset completely yet.

my form:

class BlogMessageForm(forms.ModelForm):
    class Meta:
        model = BlogMessage
        fields = ['field1', 'field2', ]

class BlogMessageFormsetHelper(FormHelper):
    def __init__(self, *args, **kwargs):
        super(BlogMessageFormsetHelper, self).__init__(*args, **kwargs)
        self.form_tag = False
        self.layout = Layout(
            TabHolder(
                Tab('Form%s' % (form.pk),
                    'field1', 'field2', 'DELETE',
                    )
             )

        )

my view:

def all_blogs_messages_in_bootstrap_tab(request):
  all_blog_messages = BlogMessage.objects.all()
  blogMessageForm = modelformset_factory(BlogMessage, form=BlogMessageForm, extra=1, can_delete=True)
  formset = blogMessageForm(queryset=all_blog_messages)
  helper = BlogMessageFormHelper()

  render_to_response("blogs/blogMessage_forms.html", {'formset': formset, 'helper': helper}, context_instance=RequestContext(request))

my crispyForms template:

{% load crispy_forms_tags %}
<form method="post" action="" encrypt="multipart/form-data">{% csrf_token %}
    {% crispy formset helper %}
</form>

There it is some info about that crispyForm formset contraint:

• django crispy forms: Nesting a formset within a form
• related issue
• crispyForm tab and tab holder doc

Answer 1

Here is how I would do it:

<form method="post" enctype="multipart/form-data">{% csrf_token %}
  {{ formset.management_form }}
  <div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
      {% for form in formset %}
        <li role="presentation" class="{% if forloop.first %}active{% endif %}">
          <a href="#id_form-{{ forloop.counter0 }}" aria-controls="id_form-{{ forloop.counter0 }}" role="tab" data-toggle="tab">
            {% if forloop.counter0 < formset.initial_forms|length %}
              Form{{ forloop.counter }}
            {% else %}
              New Form
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
    <div class="tab-content">
      {% for form in formset %}
        <div role="tabpanel" class="tab-pane{% if forloop.first %} active{% endif %}" id="id_form-{{ forloop.counter0 }}">
          {% crispy form %}
          {% if form.instance.pk %}
             <input id="id_form-{{ forloop.counter0 }}-id" name="form-{{ forloop.counter0 }}-id" type="hidden" value="{{ form.instance.id }}">
          {% endif %}
          {% if forloop.counter0 < formset.initial_forms|length %}
            {% if formset.can_delete %}
              <input id="id_form-{{ forloop.counter0 }}-DELETE" name="form-{{ forloop.counter0 }}-DELETE" type="hidden">
              <button type="submit" data-id="id_form-{{ forloop.counter0 }}-DELETE" class="btn btn-default btn-formset-delete">Delete</button>
            {% endif %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

Almost forgot, delete button won't work without some javascript. But that is optional of course, delete field can be made visible and button removed, otherwise:

$(document).ready(function(){
    $(".btn-formset-delete").click(function(){
        $("#" + $(this).data('id')).val("on");
        return true;
    });
});

Also add this to the form:

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.form_tag = False
    self.helper.disable_csrf = True