Django和Bootstrap:知道哪个标签是活动的

时间:2012-08-13 02:26:45

标签: python html django twitter-bootstrap

这里的一般网站开发新手。我的背景是Java,但最近我和Django + Bootstrap网站一直在玩很多。

我目前正在开发一个有趣的小项目,但遇到了一个关于我希望Bootstrap中的标签如何工作的问题。

这里的上下文是用户可以使用这些Django生成的表单记录他们已经完成的锻炼。一周中的日期是页面顶部的标签。

如何知道服务器端哪个标签处于活动状态,以便我可以将锻炼正确地提交到数据库中的正确位置?

显而易见的解决方案只是制作7种不同的形式,但必须有一个更好的解决方案,我太过新手了。

这是我的html正文:

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

3 个答案:

答案 0 :(得分:2)

您可以在表单中添加隐藏字段以标识您要提交的标签/表单,也可以为每个要提交的表单设置不同的网址。

答案 1 :(得分:0)

除非你的javascript告诉它(解决Here),否则你无法在服务器端知道。这是因为浏览器不会在页面焦点上向后端发送更多信息,因此您将在服务器端处处于黑暗状态

答案 2 :(得分:0)

day = DayModel.objects.get(id = 1)#用于测试目的,直到找出标签

假设day = sunday或monday或tuesday like string。现在你可以把if标签放在

  • 中来检查一天并把class =&#34; active&#34;在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>