2013-04-04 19 views
10

मैं एक वेब-आधारित डैशबोर्ड निर्माण कर रहा हूँ, और मैं Twitter Bootstrap से रेडियो बटन का उपयोग करने के लिए क्वेरी है कि तब (Flask के माध्यम से) MongoDB के खिलाफ चलाए जा रहे हैं बनाने में आपकी मदद करना चाहते हैं के साथ ट्विटर बूटस्ट्रैप रेडियो बटन, तो ताज़ा करता है जो नए जनसंख्या वाले डेटा के साथ पृष्ठ। मैं वेब-आधारित डैशबोर्ड बनाने में नया हूं, इसलिए कृपया मुझे बताएं कि ऐसा करने के बेहतर तरीके हैं या नहीं।का प्रयोग बोतल

{% extends "base.html" %} 

{% block content %} 
<div class="row"> 
    <div class="span4 offset4"> 
     <div class="well"> 
      <legend>Click me!</legend> 
      <form method="POST" action="" accept-charset="UTF-8"> 
       {% if error %} 
        <div class="alert alert-error"> 
         <a class="close" data-dismiss="alert" href="#">x</a>{{ error }} 
        </div> 
       {% endif %} 

       <div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
        <button type="button" class="btn active" name="choice1" value="A">A</button> 
        <button type="button" class="btn" name="choice1" value="B">B</button> 
        <button type="button" class="btn" name="choice1" value="C">C</button> 
        <button type="button" class="btn" name="choice1" value="D">D</button> 
        <button type="button" class="btn" name="choice1" value="E">E</button> 
        <input type="hidden" name="choice1" value={{request.form['choice1']}} /> 
       </div> 

       <script type="text/jscript"> 
        $("body").find("#radios1").children().each(function() { 
         $(this).bind('click', function() { 
          $("input[name=choice1]").val(this.value); 
          }); 
        }); 
       </script> 

       <button class="btn-info btn" input type="submit">Submit</button> 
      </form> 
     </div> 
    </div> 
</div> 
{% endblock %} 

यह रेडियो बटन उत्पन्न करता है और पता लगाने के लिए जो बटन क्लिक किया गया था जावा स्क्रिप्ट कोड का उपयोग करता है, जो तब भेजता है डाटा प्रोसेसिंग के लिए request.Form वस्तु के माध्यम से वापस।

स्क्रीन अपडेट होने के बाद मैं प्रत्येक बटन-बार पर सक्रिय बॉक्स कैसे सेट करूं? क्या मुझे कुछ बटन {{if request.option1 == ?}} ब्लॉक लिखना है, फिर प्रत्येक बटन के लिए class="btn active" परिभाषित करना है, या ऐसा करने का एक और चालाक (या स्पष्ट) तरीका है? साथ ही, मैं डिफ़ॉल्ट/प्रारंभिक स्थितियों को कैसे सेट करूं? क्या मुझे अनुरोध ऑब्जेक्ट में संबंधित फ़ील्ड को पूर्व-पॉप्युलेट करना चाहिए?

साथ ही, क्या ऊपर से जावास्क्रिप्ट कोड का उपयोग किए बिना चयनित बॉक्स को फ्लास्क में पास करना संभव है?

उत्तर

12

यदि आपके पास समान नियंत्रणों के बड़े सेट हैं - उनके लिए लूप का उपयोग करने का सबसे अच्छा तरीका। आइए कल्पना करें कि हम सभी बटन नामों को संग्रहित करने के लिए सूची का उपयोग करते हैं, और बटनों की अन्य सूची को प्राप्त करते हैं। यह हमें कुछ नियंत्रक दे देंगे:

from flask import render_template 

@app.route('/form/') 
def hello(name=None): 
    return render_template('hello.html', buttons=['A', 'B', 'C'], active_btns=['A', 'C']) 

तो, टेम्पलेट में हम की तरह कुछ होगा:

<div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
{% for button in buttons %} 
    {% if button in active_btns %} 
     <button type="button" class="btn active" name="choice1" value="{{ button }}">{{ button }}</button> 
    {% else %} 
     <button type="button" class="btn" name="choice1" value="{{ button }}">{{ button }}</button> 
    {% endif %} 
{% endfor %} 
</div> 
वास्तव में, पाश के लिए अंदर अभिव्यक्ति सरल किया जा सकता

, जिंजा की तो अभिव्यक्ति का उपयोग कर, और देखना चाहिए जैसे:

<button type="button" class="btn{{" active" if button in active_btns}}" name="choice1" value="{{ button }}">{{ button }}</button> 

लेकिन अब मैं Jinja2 की जरूरत नहीं है, और वाक्य रचना में गलत हो सकता है।

मुझे मिल नहीं किया, तो आपके सवाल का सही - कुछ टिप्पणी लिखने कृपया, मैं अपने जवाब :)

8

सक्रिय बॉक्स स्थापित करने के लिए के रूप में अद्यतन करने के लिए कोशिश करता हूँ, मुझे यकीन है कि तुम क्या मतलब है नहीं कर रहा हूँ, लेकिन बटन टैग विशेषता autofocus सहायक हो सकती है। और शुरुआत में खेतों को खाली छोड़ना अच्छा विचार हो सकता है।

आप निम्न बोतल कोड का उपयोग कर जावास्क्रिप्ट के बिना कुप्पी के लिए चयनित बॉक्स पारित कर सकते हैं (अपने HTML वर्तमान में सही ढंग से कुप्पी के लिए जब सबमिट बटन अनुरोध पारित करने के लिए सेट कर दिया जाता दबाया जाता है):

from flask import Flask, render_template, request 

@app.route("/", methods = ["GET", "POST"]) 
def home(): 
    if request.method == "POST": 

     button = request.form['choice1'] #this retrieves which radio button was pressed 

     if button == 'A': #if the button with attribute value = "A' is pressed 
      #what you want to do when button A is pressed 
     elif button == 'B': 
      #what you want to do when button B is pressed 
     elif button == 'C': 
      #what you want to do when button C is pressed 
     elif button == 'D': 
      #what you want to do when button D is pressed 
     elif button == 'E': 
      #what you want to do when button E is pressed 
    return render_template("home.html")