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
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
<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
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
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
- Make clicked tab active in Bootstrap
- Find Active Tab using jQuery and Twitter Bootstrap
- Dynamic Bootstrap Tabs using Django
- Link to specific tab Bootstrap
- How to tell which tab is active
- Using Django with Bootstrap Dynamic Tabs
- Twitter bootstrap tab, find active tab text
- Bootstrap Tabs how to tell which tab is the active one in jQuery?
- Bootstrap3 tabs in Django
- Get Current Active Tab through JS.