0

I have a set of Twitter Bootstrap buttons on a web-app, I need to pass the selection to Flask, and I don't want to use a submit button. 

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

Twitter bootstrap automatically updates the class="btn active" setting, depending on the click. But how do I pass the selected button to Flask? I would like the button click to call a function in the flask app (a python function) and update a particular setting, but I don't want to reload the entire webpage upon each click.

I have seen some solutions that have a hidden button, with a jquery function that updates the value of the hidden button, but how does that selection get passed to flask:

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

Thanks!

vgoklani
  • 10,685
  • 16
  • 63
  • 101
  • Do you know what AJAX is? – Pigueiras Apr 28 '13 at 19:35
  • exactly, but is there a good example for processing the selected button via Flask? – vgoklani Apr 28 '13 at 19:37
  • 1
    Just do an HTTP request from Javascript when the state of the button change (it can be super easy if you use a Javascript framework). Then write a handler for that very request in your flask app and perform the processing you want to do. – lc2817 Apr 28 '13 at 19:43
  • As you use JQuery, take a look at the `get` or `post` functions for example. – Pigueiras Apr 28 '13 at 19:57
  • it seems strange that Twitter Bootstrap doesn't have the ability to pass button clicks directly. Why do I have to use hidden buttons and jquery, it seems like a hack-solution. – vgoklani Apr 28 '13 at 20:02
  • Why dont you use something like `$(#radios1 btn).click (function(){$(this).val()...`. That will give you the value of the clicked button. And then you can send an AJAX request with that value. It seems for me a bit weird what you were trying to do. – Pigueiras Apr 29 '13 at 00:44
  • Also remember to mention the people who you want to talk with coments with @. If you put a message with @Pigueiras I will receive a notification with your message. Otherwise I won't realise that you put a new comment here ;-) – Pigueiras Apr 29 '13 at 00:47
  • Thanks @Pigueiras ! how do I send the AJAX request to flask? I found this: http://stackoverflow.com/questions/14908864/how-can-i-use-data-posted-from-ajax-in-flask but do you have a more clear code snippet? – vgoklani Apr 29 '13 at 01:29

1 Answers1

1

If you want to send an AJAX request to Flask you have to do something like that:

<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">
    $("#radios button").click(function() {
        $.post("/your_url_mapped_in_flask", { choice1: $(this).val() } );
    });
</script>

This script will send a POST request to the action mapped in Flask. In Flask you have to process it like that:

@app.route("/your_url_mapped_in_flask")
def my_action():
   choice = request.form['choice1']
   # Do whatever you want to do with the vble choice

I think they are the basics. You can also return from the server a success message and process it to show it in the view. Or you can do that with a GET request and the get function, but the arguments have to be recovered with request.args.get instead of request.form.

If my post it isn't clear enough, you can also take a look to the official example of AJAX in Flask or to the $.get(), $.post() or $.getJSON() functions of Jquery:

Pigueiras
  • 18,778
  • 10
  • 64
  • 87