CODEWITHSUNDEEP
javascriptpythonflask
Michael K
Michael K

Reputation: 2288

Get dynamic list elements to server in Flask/Javascript

I'm trying to write a very basic Flask/Javascript app that can check the order of a list of elements every time the "submit" button is clicked (and send it to the server); I've tried a lot of different variants of "request.get" and can't seem to find anything that will pull any information on the listWithHandle element.

This seems like a simple operation, but I'm pretty new to web programming and I haven't been able to decode the docs that I'm sure contain the solution.

There are two files:

app.py

from flask import Flask, render_template, request, redirect
app = Flask(__name__)

names = ['Ivuoma', 'Carla', 'Aly']

@app.route('/')
def hello_world():
    # When "submit" button is clicked, 
    # print order of names to console,
    # then reorder python names list and render_template.
    return render_template('index.html', names=names)

if __name__ == '__main__':
    app.run(debug=True)

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sortable Test!</title>
  </head>
  <body>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>

  <ul id="listWithHandle">
      {% for name in names %}
        <li><span class="my-handle">:+:</span>{{ name }}</li>
      {% endfor %}
  </ul>

  <div>
      <button class="submit">Submit</button>
  </div>

  <script id="sortable-script">
        Sortable.create(listWithHandle, {
          handle: '.my-handle',
          animation: 150
        });
  </script>
  </body>
</html>

The fix, based on the accepted answer:

app.py

prelim_names = ['Carla', 'Aly', 'Ivuoma']
@app.route('/', methods=['GET', 'POST'])
def hello_world():
    names = request.form.getlist('handles[]')
    if not names:
        names = prelim_names
    print('names to display', names)
    return render_template('index.html', names=names)

index.html

  <form method="post">
  <ul id="listWithHandle">
    {% for name in names %}
        <li>
            <span class="my-handle">:+:</span>
            <input type="hidden" name="handles[]" value="{{ name }}"/> {{ name }}
        </li>
    {% endfor %}
  </ul>


    <div>
        <button class="btn btn-lg btn-primary">Submit</button>
    </div>
  </form>

Upvotes: 0

Views: 4310

Answers (1)

Joran Beasley
Joran Beasley

Reputation: 113978

{% for name in names %}
<li><span class="my-handle">:+:</span><input type="hidden" name="handles[]" value="{{ name }}"/>{{ name }}</li>
{% endfor %}

You need to provide <input> in order to send data.

Upvotes: 3

Related Questions