CODEWITHSUNDEEP
pythonflask
stocton12
stocton12

Reputation: 27

Return from Flask the value of bootstrap range

I'm just playing around with Flask and I created a bootstrap range.

{% extends 'index.html' %} {% block body %}
<div class="container">
  <div class="range-wrap">
    <input
      id="range"
      type="range"
      name="slider_value"
      min="0"
      max="100"
      value="50"
      step="1"
    />
  </div>
  <input
    type="text"
    id="range_input"
    class="form-control"
    readonly
    value="{{valueFromFlask}}"
  />
</div>
<script>
  const range = document.getElementById('range');
  const setValue = () => {
    const newValue = Number(
      ((range.value - range.min) * 100) / (range.max - range.min)
    );
    const newPosition = 10 - newValue * 0.2;

    fetch('/slider', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ slider_value: range.value }),
    }).then(
      (result) => console.log(result),
      (error) => console.log(error)
    );
  };

  document.addEventListener('DOMContentLoaded', setValue);
  range.addEventListener('input', setValue);
</script>
{% endblock %}

In Flask I get the current slider value as I'm able to print it


    @app.route('/slider', methods=['GET', 'POST'])
    def slider():
        slider_value = ""
        if request.method == 'POST':
            data = request.get_json()
            slider_value = data.get('slider_value')
            print(f'Slider Value: {slider_value}')
        return render_template("slider.html")

I can't understand how I'm supposed to return the "slider_value" to slider.html so it can be printed in the input

    <input
        type="text"
        id="range_input"
        class="form-control"
        readonly
        value="{{valueFromFlask}}"
      />

I've tried return render_template("slider.html", valueFromFlask=slider_value) but nothing shows up.

Upvotes: 0

Views: 74

Answers (1)

moon548834
moon548834

Reputation: 406

It seems you fetch the data but doesn't rerender the web

fetch('/slider_value', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ slider_value: range.value }),
})
.then(response => response.json())
.then(data => {
  document.getElementById('range_input').value = data.slider_value;
})
.catch((error) => console.log(error));

    # keep this
    @app.route('/slider', methods=['GET', 'POST'])
    def slider():
        slider_value = ""
        if request.method == 'POST':
            data = request.get_json()
            slider_value = data.get('slider_value')
            print(f'Slider Value: {slider_value}')
        return render_template("slider.html")
    
    # this is new 
    @app.route('/slider_value', methods=['POST'])
    def slider():
        slider_value = ""
        if request.method == 'POST':
            data = request.get_json()
            slider_value = data.get('slider_value')
            print(f'Slider Value: {slider_value}')
        return jsonify({'slider_value': slider_value})

Upvotes: 1

Related Questions