Forms on multiple tabs

Using Django
1

Hey,

I’m developping an application for an existing old system. I have to keep a pretty similar layout to what they are currently using.

Some of the UI they use are spread on different tabs. The way I have implemented it right now (which doesn’t use jquery/javascript) is that I have 1 url path for each tab, referring to the same CBV. I pass the pk for the object from the URL along with the section to the View, something like this:

urls.py
    path('product/<int:pk>/', views.PickDetailedView.as_view(), {"section": "product"}, name='detail_product', ),
    path('detail/<int:pk>/', views.PickDetailedView.as_view(), {"section": "detail"}, name='detail_detail'),
    path('info/<int:pk>/', views.PickDetailedView.as_view(), {"section": "info"}, name='detail_info'),
    path('bin/<int:pk>/', views.PickDetailedView.as_view(), {"section": "bin"}, name='detail_bin'),
    path('memo/<int:pk>/', views.PickDetailedView.as_view(), {"section": "memo"}, name='detail_memo'),


views.py:
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        section = self.kwargs["section"]
        context["section"] = section

        # getting the customer info for the middle section
        entpick = Entpick.objects.get(pk=self.kwargs["pk"])
        [...]

Then I use an inclusion_tag in the template, who sets the appropriate active tag (e.g. the css styling to emphasis which tab is active) approprately a few small things like that, using what I’ve put in the context. That works fine.

However, I hadn’t realized that they also had forms following a similar pattern (e.g. part of the form is on one tab, and another part is on another tab…). So if the user clicks from one tab to the other, that’s a new GET request, and I’m going to loose the form data, no?

Generally my forms are defined as Form, ModelForm or Formsets. I know that for POST, I can do stuff like:

def get_context_data(self, **kwargs):
    context["myform"] = SomeFormset(self.request.POST)

and have the form prepopulated. However in this case, clicking on the tab would result in a GET… So is there an equivalent way to pass the current value of the forms into those GET requests? Or will have absolutely have to add some javascript/jquery wizardery to make that work? I’d rather avoid JS if I can and do it in pure django.

OF course another option would be do away with the tabs & bring everything into a single page, as is probably should. BUt that’s going to be a hard pill to swallow on the customer side so not too keen on it… ANy ideas?

2

Options:

  • Yes, manage the tabs, forms, and form data via JavaScript / AJAX
  • Build all the forms with the first get. Enclose the complete set of tabs in a single form tag. The tabs then are selecting which divs are to be shown / hidden.