ALSpringer
ALSpringer

Reputation: 55

Django and Bootstrap: Knowing Which Tab is Active

General web development newbie here. My background is Java but I've been playing around a lot with Django + Bootstrap websites lately.

I'm currently working on a fun little project but ran into an issue regarding how I want the tabs in Bootstrap to work.

The context here is that a user can log a workout they have done using these Django generated forms. The days of the week are tabs across the top of the page.

How can I know which tab is active on the server side, so that I can properly submit the workout into the right spot in the database?

The obvious solution is just to make 7 different forms, but there has to be a better solution that I am too much of a newbie to see.

Here is my html body:

    <body>
    <div class ="container-fluid">
        <div class = "span8 offset4">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
              <li><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
              <li><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
              <li><a href="#Thu" data-toggle="tab"><h3>Thu</h3></a></li>
              <li><a href="#Fri" data-toggle="tab"><h3>Fri</h3></a></li>
              <li><a href="#Sat" data-toggle="tab"><h3>Sat</h3></a></li>
              <li><a href="#Sun" data-toggle="tab"><h3>Sun</h3></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade in active " id="Mon">
                <div class="accordion" id="accordion2">  
                 <div class="accordion-group">  
                    <div class="accordion-heading">  
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWarmup">  
                      <h2>Warmup</h2> </a>
                    </div>
                    <div id="collapseWarmup" class="accordion-body collapse" style="height: 0px; ">  
                        <div class="accordion-inner">  
                          <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Sets</th>
                                    <th>Reps</th>
                                    <th>Distance</th>
                                    <th>Intensity</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for exercise in mon.warmup.all %}
                                    <tr>
                                        <td>{{ exercise.name }} </td>
                                        {% if exercise.sets %}
                                            <td>{{ exercise.sets }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.reps %}
                                            <td>{{ exercise.reps }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.distance %}
                                            <td>{{ exercise.distance }}m </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.intensity %}
                                            <td>{{ exercise.intensity }}</td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                                <form name="warmupform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <p>{{ warmupform.as_p }}
                                    </p>
                                    <p><button type="submit" name="warmupsubmit" class="btn btn-primary">Submit Workout</button></p>
                                </form>
                          </div> <!-- accordian inner -->
                        </div>  <!-- collapseone -->
                    </div>  <!-- accordian group -->
                 <div class="accordion-group">  
                    <div class="accordion-heading">  
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWorkout">  
                      <h2>Workout</h2> </a>
                    </div>
                    <div id="collapseWorkout" class="accordion-body collapse" style="height: 0px; ">  
                        <div class="accordion-inner">  
                          <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Sets</th>
                                    <th>Reps</th>
                                    <th>Distance</th>
                                    <th>Intensity</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for exercise in mon.intervalworkout.all %}
                                    <tr>
                                        <td>{{ exercise.name }} </td>
                                        {% if exercise.sets %}
                                            <td>{{ exercise.sets }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.reps %}
                                            <td>{{ exercise.reps }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.distance %}
                                            <td>{{ exercise.distance }}m </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.intensity %}
                                            <td>{{ exercise.intensity }}</td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                                <form name="intervalform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <p>{{ intervalform.as_p }}
                                    </p>
                                    <p><button type="submit" name="intervalsubmit" class="btn btn-primary">Submit Workout</button></p>
                                </form>
                          </div> <!-- accordian inner -->
                        </div>  <!-- collapseone -->
                    </div>  <!-- accordian group -->
                 <div class="accordion-group">  
                    <div class="accordion-heading">  
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWeights">  
                      <h2>Strength Training</h2> </a>
                    </div>
                    <div id="collapseWeights" class="accordion-body collapse" style="height: 0px; ">  
                        <div class="accordion-inner">  
                          <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Sets</th>
                                    <th>Reps</th>
                                    <th>Intensity</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for exercise in mon.strengthtraining.all %}
                                    <tr>
                                        <td>{{ exercise.name }} </td>
                                        {% if exercise.sets %}
                                            <td>{{ exercise.sets }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.reps %}
                                            <td>{{ exercise.reps }} </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                        {% if exercise.intensity %}
                                            <td>{{ exercise.intensity }}</td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                                <form name="strengthtrainingform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <p>{{ strengthform.as_p }}
                                    </p>
                                    <p><button type="submit" name="strengthtrainingsubmit" class="btn btn-primary">Submit Workout</button></p>
                                </form>
                          </div> <!-- accordian inner -->
                        </div>  <!-- collapseone -->
                    </div>  <!-- accordian group -->
                </div>  <!-- accordian 2 -->
            </div><!-- tabpane -->
                      <div class="tab-pane fade in " id="Tues">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
                      <div class="tab-pane fade in " id="Wed">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
                      <div class="tab-pane fade in " id="Thu">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
                      <div class="tab-pane fade in " id="Fri">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
                      <div class="tab-pane fade in " id="Sat">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
                      <div class="tab-pane fade in " id="Sun">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
        </div><!-- tabcontent -->
    </div> <!-- span6 -->
</div> <!-- container fluid -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    <script src="{{ STATIC_URL }}Bootstrap/js/bootstrap.js"></script>  
    <script type='text/javascript'>//<![CDATA[ 
    $(function(){
    $('#myTab a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })



    $('#myTab a:first').tab('show');


    });//]]>  
    </script>
</body>

And my current view that handles that page:

def editworkout(request):
day = DayModel.objects.get(id=1) #for testing purposes, until tabs are figured out
if request.method == 'POST': 
    if 'strengthtrainingsubmit' in request.POST:
        form = StrengthExerciseForm(request.POST)
        if form.is_valid():
            day.strengthtraining.add(form.save()) #saves the model and returns its
            return HttpResponseRedirect(reverse('editworkout'))
    if 'intervalsubmit' in request.POST:
        form = IntervalForm(request.POST)
        if form.is_valid():
            day.intervalworkout.add(form.save());
            return HttpResponseRedirect(reverse('editworkout'))
    if 'warmupsubmit' in request.POST:
        form = AbstractExerciseForm(request.POST)
        if form.is_valid():
            day.warmup.add(form.save());
            return HttpResponseRedirect(reverse('editworkout'))            
else:
        warmupform = AbstractExerciseForm()
        intervalform = IntervalForm()
        strengthform = StrengthExerciseForm()  
        return render_to_response('editworkout.html',
                          { 'mon':day,
                           'warmupform':warmupform,
                           'intervalform':intervalform,
                           'strengthform':strengthform, },
                          context_instance=RequestContext(request)
                         )

Upvotes: 4

Views: 4104

Answers (3)

jatinkumar patel
jatinkumar patel

Reputation: 2990

day = DayModel.objects.get(id=1) #for testing purposes, until tabs are figured out

suppose day=sunday or monday or tuesday like string. Now you can put if tag inside

  • to check day and put class="active" inside the if condition. So whenever condition is matched, the class will be active for specific day.

    <ul id="myTab" class="nav nav-tabs">
              <li {%if day == "monday"%} class="active"{%endif%}><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
              <li{%if day == "tuesday"%} class="active"{%endif%}><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
              <li {%if day == "wednesday"%} class="active"{%endif%}><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
    .
    .
    .
    </ul>
    

    Upvotes: 0

  • Rohan
    Rohan

    Reputation: 53386

    You can add a hidden field in form to identify tab/form you are submitting, or you can have different URLs for each form to submit to.

    Upvotes: 2

    AI Generated Response
    AI Generated Response

    Reputation: 8845

    There is no way for you to know on the server side, unless your javascript tells it so (solved Here). This is because the browser does not send more information to the backend on page focus, and therefore you will be left in the dark on the serverside

    Upvotes: 0

    Related Questions