Using Twitter Bootstrap radio buttons with Flask

Question

I am building a web-based dashboard, and I would like to use radio-buttons from Twitter Bootstrap to help create queries that are then run against MongoDB (via Flask), which then refreshes the same page with newly populated data. I am new at building web-based dashboards, so please let me know if there are better ways of doing this.

{% 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 %}

This generates the radio-buttons and uses JavaScript code to detect which button was clicked, which then sends that data back through the request.Form object for processing.

How do I set the active box on each of the button-bars after the screen is updated? Do I have to write some sort of {{if request.option1 == ?}} block to then define the class="btn active" for each button, or is there a more clever (or obvious) way of doing this? Also, how do I set the defaults/initialization conditions? Should I pre-populate the corresponding fields in the request object?

Also, is it possible to pass the selected boxes to Flask without using the JavaScript code from above?

Answer 1

As for setting the active box, I'm not sure what you mean, but the button tag attribute autofocus may be helpful. And it might be a good idea to just leave the fields blank initially.

You can pass the selected box to Flask without JavaScript using the following Flask code (your HTML currently is set up correctly to pass requests to Flask when the Submit button is pressed):

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

Answer 2

If you have big sets of similar controls — best way to use loops for them. Let's imagine we use list for storing all button names, and other list of buttons that are acive. This will give us some controller:

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

So, in template we'll have something like:

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

Actually, expression inside for loop can be simplified, using Jinja's If expression, and should look like:

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

But I don't have Jinja2 now, and could be wrong in syntax.

If I didn't got your question right — please write some comment, I'll try to update my answer :)