Обработка Twitter Bootstrap Events with Flask

Question

У меня есть набор кнопок Bootstrap Twitter в веб-приложении, мне нужно передать выделение в 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> 
</div> 

Twitter bootstrap автоматически обновляет параметр class = "btn active", в зависимости от щелчка. Но как передать выбранную кнопку в Flask? Я бы хотел, чтобы кнопка нажала кнопку вызова функции в флеш-приложении (функция python) и обновила конкретный параметр, но я не хочу перезагружать всю веб-страницу при каждом нажатии.

Я видел некоторые решения, которые имеют скрытую кнопку, с помощью функции JQuery, который обновляет значение скрытой кнопки, но как это выбор получить передается в колбу:

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

Спасибо!

Answer 1

Если вы хотите отправить запрос AJAX к Колба вы должны сделать что-то подобное:

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

Этот сценарий будет посылать запрос POST к действию отображенной в термос. В Flask вы должны обработать это так:

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

Я думаю, что это основы. Вы также можете вернуть с сервера сообщение об успешном завершении и обработать его, чтобы показать его в представлении. Или вы можете сделать это с помощью запроса GET и функции get, но аргументы должны быть восстановлены с помощью request.args.get вместо request.form.

Если мой пост не достаточно ясно, вы также можете посмотреть на the official example of AJAX in Flask или к функциям $.get(), $.post() или $.getJSON() из Jquery:

• get: http://api.jquery.com/jQuery.get/
• post: http://api.jquery.com/jQuery.post/
• getJSONhttp://api.jquery.com/jQuery.getJSON/