Django code to open sepecific tab in render_to_response in view

Question

In my Django code I want to implement the following flow:

1. After submitting a Html form to view
2. Redirect to next tab in same HTML form which contain next form.

This is my code so far:

def addnewroute(request):
 if request.method == "POST":
       # do needed

   render_to_response('useradd.html')

Answer 1

Introduction

Tabs are usually a visual (UI) element; meaning that there are CSS styles defining the actual tabs as "pressed" or "depressed". How the tabs "change" is defined by the implementation method you choose. Let's look at the simplest solutions.

Manual render (hard code / multi template)

If you prefer to build it all manually, you can add a condition to choose the correct html template, which would already be pre-styled to the correct tab pressed, and display the required content. I would not recommend this method except to learn more of how the internals work and as proof of concept.

def addnewroute(request):
    # ...
    if step1:
        return render_to_response('useradd-tab1.html')

    if step2:
        return render_to_response('useradd-tab2.html')

Context / Template reuse

If you prefer to reuse most of your template content you can utilize the context dictionary argument to pass a step variable (to define in "which tab you should be now"), and a content variable (containing the tab content or other switch data), into your template; which will change depending on the reached step:

def addnewroute(request):
    # ...
    if step1:
        return render_to_response('useradd.html', {'step': 1, 'form': form1})

    if step2:
        return render_to_response('useradd.html', {'step': 2, 'form': form2})

Then, use the passed context variables in your template, to define the condition that toggles the selected style on the tabs and displays the relevant form.

<div id="tab1" class="tab{% if step1 %} selected{% endif %}">...</div>
{{ form.as_table }}

This method is very similar to the first, except the same template is reused for both steps.

Caveats with above direct render implementations

The above methods can accomplish what you asked about; however, there are a few caveats. First, the URL remains the same, which means the user cannot navigate between steps in a persistent manner. Second, the amount of "wiring code" you would have to write (front and back-end) will be a real labor. This is why I would recommend one of the following implementations for a "stepped form".

Form Wizard

Django (versions >= 1.4, < 1.8) shipped with an "optional “form wizard” application that splits forms across multiple Web pages". The Django Form Wizard uses a specialzed WizardView class based view to simplify multi-step form creation. Note: As of Django 1.8, The form wizard was moved out of django.contrib into it's own package django-formtools.

Javascript

A more sophisticated solution may involve Javascript activated tabs, such as bootstrap tabs. In this case you would have to either: a. render all the forms in the same template (hidden by default, toggleable by on-click events) or b. fetch the data for the forms asynchronously. The upside of this solution is a more immediate UI feel for the user, the downside is definitely more complexity.

More help

If you are new to Django, templates, tabs, etc, I would suggest implementing the solutions above from the first to the last, to better understand how the internals work; and then, how you can DRY and simplify your code.

Please note that similar questions has been asked a few times on SO, such as here, here and here. So if you have any more trouble you can try searching for a related answer.