Django и Bootstrap: зная, какая вкладка активна

Общий веб-разработки новичка здесь. Мой фон – Java, но в последнее время я много играл с сайтами Django + Bootstrap.

В настоящее время я работаю над небольшим проектом, но столкнулся с проблемой относительно того, как я хочу, чтобы вкладки в Bootstrap работали.

Контекст здесь заключается в том, что пользователь может зарегистрировать тренировку, которую они сделали, используя эти Django сгенерированные формы. Дни недели – вкладки в верхней части страницы.

Как я могу узнать, какая вкладка активна на стороне сервера, чтобы я мог правильно отправить тренировку в нужное место в базе данных?

Очевидное решение состоит в том, чтобы сделать 7 разных форм, но должно быть лучшее решение, которое я слишком много новичок.

Вот мой 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> 

И мое текущее представление, которое обрабатывает эту страницу:

 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) ) 

Вы можете добавить скрытое поле в форму, чтобы идентифицировать вкладку / форму, которую вы отправляете, или вы можете иметь разные URL-адреса для каждой формы для отправки.

Вы не можете знать на серверной стороне, если ваш javascript не говорит об этом ( здесь решается). Это связано с тем, что браузер не отправляет дополнительную информацию на бэкэнд на фокус страницы, поэтому вы остаетесь в темноте на сервере

day = DayModel.objects.get (id = 1) # для целей тестирования, пока не будут найдены вкладки

предположим, день = воскресенье или понедельник или вторник, как строка. Теперь вы можете поставить if tag внутри

  • проверить день и поставить class = "active" внутри условия if. Поэтому, когда условие согласовано, класс будет активен в течение определенного дня.
  •  <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>