web-dev-qa-db-ja.com

Flask-動的ラベル付きのトグルボタン

Flaskを初めて使用し、Webサイトにオン/オフ切り替えボタンを作成したい。動的ラベルも含めて、これが可能かどうか、またどのように可能か疑問に思っていました。次の図は、私が持っているものを示しています。念頭に置いて：

wtfformsSubmitFieldの使用を考えていましたが、routes.pyファイルとhtmlテンプレートの間にこの動的な動作を実装する方法がよくわかりません。私はこのようなことを考えていました：

forms.py：

from flask_wtf import FlaskForm
from wtforms import SubmitField

class PowerSwitchForm(FlaskForm):
    power_switch = SubmitField("ON")

ルート.py：

from flask import render_template, flash, redirect, url_for
from app import app
from app.forms import PowerSwitchForm

@app.route('/power', methods=['GET', 'POST'])
def power():
  power_switch = PowerSwitchForm()
  if power_switch.power_switch.label.text == "ON" and power_switch.validate():
    flash("Power has been turned ON")
    power_switch.power_switch.label.text = "OFF"
    return redirect(url_for('power')
  Elif power_switch.power_switch.label.text == "OFF" and power_switch.validate():
    flash("Power has been turned OFF")
    power_switch.power_switch.label.text = "ON"
    return redirect(url_for('power')
  return render_template('power.html', form0=power_switch)

power.html：

<!DOCTYPE html>

{% extends "base.html" %}

{% block content %}
<h2>Power switch</h2>
<form action="" method="post" novalidate>
  {{ form0.hidden_tag() }}
  {{ form0.power_switch() }}
</form>    
{% endblock %}
pythonflaskjinja2flask-wtforms
6
uitty400

jqueryを使用して、トグルボタンがクリックされたときに目的の操作を処理できます。また、ボタンを切り替えたときに実行する必要のあるバックエンドプロセスがある場合は、ajaxを使用できます。この答えは両方を示しています。 bootstrap-toggle は、トグルの簡単な実装を可能にするライブラリです。使用するには、以下のheaderタグ値をコピーします。

「トグル」または「アントグル」を表示する単純なトグル：

<html>
  <body>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    </head>
    <input type="checkbox" class='toggle' checked data-toggle="toggle">
    <div class='status'>Toggled</div>
  </body>
  <script>
  $(document).ready(function() {
   $('.toggle').click(function() {
      var current_status = $('.status').text();
      if (current_status === 'Untoggled'){
         $('.status').html('Toggled');
      }
      else{
        $('.status').html('Untoggled');
      }

    });
   });
 </script>
</html>

enter image description here

「トグル」または「アントグル」の両方のバックエンドスクリプトをトリガーするトグル：

テンプレートで、scriptを少し変更します。

<script>
 $(document).ready(function() {
  $('.toggle').click(function() {
   var current_status = $('.status').text();
   $.ajax({
    url: "/get_toggled_status",
    type: "get",
     data: {status: current_status},
     success: function(response) {
      $(".status").html(response);
     },
     error: function(xhr) {
      //Do Something to handle error
     }
   });
  });
});
</script>

次に、アプリでルートを作成します/get_toggled_status：

@app.route('/get_toggled_status') 
def toggled_status():
  current_status = flask.request.args.get('status')
  return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'

この例は、純粋なhtml/jqueryソリューションと同じことを行いますが、トグルを使用するときにバックエンドと通信する方法を示しています。

4
Ajax1234