├── .gitignore
├── json-example
    ├── app.py
    ├── departments.json
    ├── employees.json
    ├── form.py
    ├── static
    │   ├── main.css
    │   └── main.js
    └── templates
    │   └── index.html
├── readme.md
├── requirements.txt
├── sql-example
    ├── app.py
    ├── db_init.py
    ├── form.py
    ├── query.py
    ├── schema.sql
    ├── static
    │   ├── main.css
    │   └── main.js
    ├── templates
    │   └── index.html
    └── test.db
└── sqlalchemy-example
    ├── app.py
    ├── hello
        ├── __init__.py
        ├── config.py
        ├── db_init.py
        ├── form.py
        ├── models.py
        ├── schema.sql
        ├── static
        │   ├── main.css
        │   └── main.js
        ├── templates
        │   └── index.html
        ├── test.db
        └── views.py
    └── requirements.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | *.pyc
3 | env
4 | *.db


--------------------------------------------------------------------------------
/json-example/app.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from flask import Flask, request, render_template, make_response
 3 | from form import TestForm
 4 | 
 5 | app = Flask(__name__)
 6 | app.config['SECRET_KEY'] = "my precious"
 7 | 
 8 | 
 9 | @app.route("/department", methods=["GET", "POST"])
10 | def index():
11 |     """
12 |     Render form and handle form submission
13 |     """
14 |     form = TestForm(request.form)
15 |     form.department.choices = [('', 'Select a department')] + [
16 |         (x['department_id'], x['name']) for x in parse_json("departments.json")["departments"]]
17 |     chosen_department = None
18 |     chosen_employee = None
19 |     
20 |     return render_template('index.html', form=form)
21 | 
22 | 
23 | @app.route("/department/<int:department_id>/", methods=["GET"])
24 | def get_request(department_id):
25 |     """
26 |     Handle GET request to - /<department_id>/
27 |     Return a list of tuples - (<employee id>, <employee name>)
28 |     """
29 |     data = [
30 |         (x['employee_id'], x['name']) for x in parse_json("employees.json")["employees"]
31 |         if x['department_id'] == department_id]
32 |     response = make_response(json.dumps(data))
33 |     response.content_type = 'application/json'
34 |     return response
35 | 
36 | 
37 | def parse_json(json_file):
38 |     with open(json_file) as data_file:    
39 |         data = json.load(data_file)
40 |     print data
41 |     return data
42 | 
43 | 
44 | if __name__ == "__main__":
45 |     app.run(debug=True)
46 | 


--------------------------------------------------------------------------------
/json-example/departments.json:
--------------------------------------------------------------------------------
 1 | {"departments": [
 2 |     {"department_id":1, "name":"Accounting"}, 
 3 |     {"department_id":2, "name":"Sales"}, 
 4 |     {"department_id":3, "name":"Management"}
 5 |     ]
 6 | }
 7 | 
 8 | 
 9 | 
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/json-example/employees.json:
--------------------------------------------------------------------------------
 1 | {"employees": [
 2 |     {"employee_id": 1, "department_id": 1, "name": "Kyra Davis"},
 3 |     {"employee_id": 2, "department_id": 1, "name": "Abigail Whitfield"},
 4 |     {"employee_id": 3, "department_id": 1, "name": "Maya Chase"},
 5 |     {"employee_id": 4, "department_id": 1, "name": "Lydia Hyde"},
 6 |     {"employee_id": 5, "department_id": 2, "name": "Wynne Erickson"},
 7 |     {"employee_id": 6, "department_id": 2, "name": "Candice Davidson"},
 8 |     {"employee_id": 7, "department_id": 2, "name": "Lawrence Roman"},
 9 |     {"employee_id": 8, "department_id": 2, "name": "Kameko Parker"},
10 |     {"employee_id": 9, "department_id": 3, "name": "Jamal Everett"},
11 |     {"employee_id": 10, "department_id": 3, "name": "Avram Burks"},
12 |     {"employee_id": 11, "department_id": 3, "name": "Mia Mendez"},
13 |     {"employee_id": 12, "department_id": 3, "name": "Ila Cantrell"}
14 |     ]
15 | }
16 | 
17 | 
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/json-example/form.py:
--------------------------------------------------------------------------------
1 | from flask.ext.wtf import Form
2 | from wtforms import SelectField
3 | 
4 | 
5 | class TestForm(Form):
6 |     department = SelectField(u'', choices=())
7 |     employee = SelectField(u'', choices=())


--------------------------------------------------------------------------------
/json-example/static/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   padding-top: 50px;
3 |   max-width: 500px;
4 | }
5 |  #employee_select, #show_selection {
6 |   display: none;
7 | }


--------------------------------------------------------------------------------
/json-example/static/main.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 | 
 3 |   // test to ensure jQuery is working
 4 |   console.log("whee!")
 5 | 
 6 |   // disable refresh button
 7 |   $("#refresh-btn").prop("disabled", true)
 8 |   
 9 | 
10 |   $("#department_select").change(function() {
11 | 
12 |     // grab value
13 |     var department_id = $("#department_select").val();
14 | 
15 |     // send value via GET to URL /<department_id>
16 |     var get_request = $.ajax({
17 |       type: 'GET',
18 |       url: '/department/' + department_id + '/',
19 |     });
20 | 
21 |     // handle response
22 |     get_request.done(function(data){
23 | 
24 |       // data
25 |       console.log(data)
26 | 
27 |       // add values to list 
28 |       var option_list = [["", "Select an employee"]].concat(data);
29 |       $("#employee_select").empty();
30 |         for (var i = 0; i < option_list.length; i++) {
31 |           $("#employee_select").append(
32 |             $("<option></option>").attr("value", option_list[i][0]).text(option_list[i][1]));
33 |         }
34 |       // show model list
35 |       $("#employee_select").show();
36 |     });
37 |   });
38 | 
39 |   $("#submit-btn").click(function() {
40 | 
41 |     // grab values
42 |     var department = $("#department_select").find(":selected").text();
43 |     var employee = $("#employee_select").find(":selected").text();
44 |     var department_id = $("#department_select").val();
45 |     var employee_id = $("#employee_select").val();
46 | 
47 |     // append values to the DOM
48 |     $("#chosen_department").html(department);
49 |     $("#chosen_employee").html(employee);
50 |     $("#chosen_department_id").html(department_id);
51 |     $("#chosen_employee_id").html(employee_id);
52 | 
53 |     // show values selected
54 |     $("#show_selection").show();
55 |     // enable refresh button
56 |     $("#refresh-btn").prop("disabled", false)
57 |     // disable submit button
58 |     $("#submit-btn").prop("disabled", true);
59 | 
60 |     // disable dropdown inputs
61 |     $("#employee_select").prop("disabled", true);
62 |     $("#department_select").prop("disabled", true);
63 |     $("#employee_select").prop("disabled", true);
64 |   });
65 | 
66 |   $("#refresh-btn").click(function() {
67 | 
68 |     // remove values to the DOM
69 |     $("#chosen_department").html("");
70 |     $("#chosen_employee").html("");
71 |     $("#chosen_department_id").html("");
72 |     $("#chosen_employee_id").html("");
73 | 
74 |     // hide values selected
75 |     $("#show_selection").hide();
76 |     // disable refresh button
77 |     $("#refresh-btn").prop("disabled", true);
78 |     // enable submit button
79 |     $("#submit-btn").prop("disabled", false);
80 |     // hide model list
81 |     $("#employee_select").hide();
82 | 
83 |     // enable dropdown inputs
84 |     $("#employee_select").prop("disabled", false);
85 |     $("#department_select").prop("disabled", false);
86 | 
87 |    
88 |   });
89 | 
90 | });


--------------------------------------------------------------------------------
/json-example/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Flask - AJAX Form</title>
 6 |     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 7 |     <link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet">
 8 |   </head>
 9 |   <body>
10 | 
11 |     <div class="container">
12 |       <h1>Select a department</h1><br><br>
13 | 
14 |       <div id="department_selection">
15 |         <form action="/" method="POST">
16 |           {{ form.hidden_tag() }}
17 |           {{ form.department(id="department_select", class="form-control") }}
18 |           <br>
19 |           {{ form.employee(id="employee_select", class="form-control") }}
20 |           <br><br>
21 |           <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
22 |           <button type="button" class="btn btn-success" id="refresh-btn">Refresh</button>
23 |         </form>
24 |       </div>
25 | 
26 |       <br><br>
27 | 
28 |       <div id="show_selection">
29 |         <h2>You selected:</h2>
30 |         <table class="table">
31 |           <thead>
32 |             <tr>
33 |               <th>Department ID</th>
34 |               <th>Department</th>
35 |               <th>Employee ID</th>
36 |               <th>Employee</th>
37 |             </tr>
38 |           </thead>
39 |           <tbody>
40 |             <tr>
41 |               <td><span id="chosen_department_id"></span></td>
42 |               <td><span id="chosen_department"></td>
43 |               <td><span id="chosen_employee_id"></span></td>
44 |               <td><span id="chosen_employee"></td>
45 |             </tr>
46 |           </tbody>
47 |         </table>
48 |       </div>
49 | 
50 |     </div>
51 | 
52 |     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
53 |     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
54 |     <script src="{{ url_for('static', filename='main.js') }}"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ## Generate a dynamic form in Flask with AJAX
 2 | 
 3 | ### Functionality
 4 | 
 5 | User selects a *department* from a drop down list. Once selected, an AJAX request is sent with the *department_id* to the server-side to grab the appropriate *employee* and *employee_id* based on the *department_id*. The JSON data response sent back contains the *employee* that populates a second drop down list.
 6 | 
 7 | ### Install
 8 | 
 9 | 1. Clone repo
10 | 1. Activate vitrualenv
11 | 1. Install requirements
12 | 1. Create database: `python db_init.py` (if needed)
13 | 1. Run
14 | 1. View - [http://localhost:5000/department](http://localhost:5000/department)


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | Flask==0.10.1
 2 | Flask-WTF==0.9.5
 3 | Jinja2==2.7.2
 4 | MarkupSafe==0.23
 5 | SQLAlchemy==0.9.4
 6 | WTForms==2.0
 7 | Werkzeug==0.9.4
 8 | itsdangerous==0.24
 9 | wsgiref==0.1.2
10 | 


--------------------------------------------------------------------------------
/sql-example/app.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from flask import Flask, request, render_template, make_response
 3 | from form import TestForm
 4 | from query import query_db
 5 | 
 6 | app = Flask(__name__)
 7 | app.config['SECRET_KEY'] = "my precious"
 8 | 
 9 | 
10 | @app.route("/department", methods=["GET", "POST"])
11 | def index():
12 |     """
13 |     Render form and handle form submission
14 |     """
15 |     form = TestForm(request.form)
16 |     form.department.choices = [('', 'Select a department')] + [
17 |         (x[0], x[1]) for x in query_db("departments")]
18 |     chosen_department = None
19 |     chosen_employee = None
20 |     
21 |     return render_template('index.html', form=form)
22 | 
23 | 
24 | @app.route("/department/<int:department_id>/", methods=["GET"])
25 | def get_request(department_id):
26 |     """
27 |     Handle GET request to - /<department_id>/
28 |     Return a list of tuples - (<employee id>, <employee name>)
29 |     """
30 |     data = [
31 |         (x[0], x[1]) for x in query_db("employees")
32 |         if x[2] == department_id]
33 |     response = make_response(json.dumps(data))
34 |     response.content_type = 'application/json'
35 |     return response
36 | 
37 | 
38 | 
39 | if __name__ == "__main__":
40 |     app.run(debug=True)
41 | 


--------------------------------------------------------------------------------
/sql-example/db_init.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | 
 3 | 
 4 | def init_db():
 5 |     connection = sqlite3.connect('test.db')
 6 |     with connection as db:
 7 |         with open('schema.sql') as f:
 8 |             line = f.read()
 9 |             db.cursor().executescript(line)
10 |         db.commit()
11 | 
12 | 
13 | if __name__ == '__main__':
14 |     init_db()


--------------------------------------------------------------------------------
/sql-example/form.py:
--------------------------------------------------------------------------------
1 | from flask.ext.wtf import Form
2 | from wtforms import SelectField
3 | 
4 | 
5 | class TestForm(Form):
6 |     department = SelectField(u'', choices=())
7 |     employee = SelectField(u'', choices=())
8 | 


--------------------------------------------------------------------------------
/sql-example/query.py:
--------------------------------------------------------------------------------
1 | import sqlite3 
2 |         
3 | def query_db(table):
4 |     connection = sqlite3.connect('test.db')
5 |     with connection as db:
6 |         cur = connection.cursor()    
7 |         cur.execute("SELECT * FROM {}".format(table))
8 |         rows = cur.fetchall()
9 |     return rows


--------------------------------------------------------------------------------
/sql-example/schema.sql:
--------------------------------------------------------------------------------
 1 | BEGIN;
 2 | 
 3 | 
 4 | DROP TABLE IF EXISTS departments;
 5 | CREATE TABLE departments (
 6 |     id              INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
 7 |     name            VARCHAR(50)
 8 | );
 9 | 
10 | 
11 | DROP TABLE IF EXISTS employees;
12 | CREATE TABLE employees (
13 |     id              INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
14 |     name            VARCHAR(100),
15 |     department_id   INTEGER,
16 |     FOREIGN KEY(department_id) REFERENCES departments(id)
17 | );
18 | 
19 | 
20 | COMMIT;
21 | 
22 | INSERT INTO departments (id, name) VALUES (1, "Accounting");
23 | INSERT INTO departments (id, name) VALUES (2, "Sales");
24 | INSERT INTO departments (id, name) VALUES (3, "Management");
25 | 
26 | INSERT INTO employees (id, name, department_id) VALUES (1, "Kyra Davis", 1);
27 | INSERT INTO employees (id, name, department_id) VALUES (2, "Abigail Whitfield", 1);
28 | INSERT INTO employees (id, name, department_id) VALUES (3, "Maya Chase", 1);
29 | INSERT INTO employees (id, name, department_id) VALUES (4, "Lydia Hyde", 1);
30 | INSERT INTO employees (id, name, department_id) VALUES (5, "Wynne Erickson", 2);
31 | INSERT INTO employees (id, name, department_id) VALUES (6, "Candice Davidson", 2);
32 | INSERT INTO employees (id, name, department_id) VALUES (7, "Lawrence Roman", 2);
33 | INSERT INTO employees (id, name, department_id) VALUES (8, "Kameko Parker", 2);
34 | INSERT INTO employees (id, name, department_id) VALUES (9, "Jamal Everett", 3);
35 | INSERT INTO employees (id, name, department_id) VALUES (10, "Avram Burks", 3);
36 | INSERT INTO employees (id, name, department_id) VALUES (11, "Mia Mendez", 3);
37 | INSERT INTO employees (id, name, department_id) VALUES (12, "Ila Cantrell", 3);


--------------------------------------------------------------------------------
/sql-example/static/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   padding-top: 50px;
3 |   max-width: 500px;
4 | }
5 |  #employee_select, #show_selection {
6 |   display: none;
7 | }


--------------------------------------------------------------------------------
/sql-example/static/main.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 | 
 3 |   // test to ensure jQuery is working
 4 |   console.log("whee!")
 5 | 
 6 |   // disable refresh button
 7 |   $("#refresh-btn").prop("disabled", true)
 8 |   
 9 | 
10 |   $("#department_select").change(function() {
11 | 
12 |     // grab value
13 |     var department_id = $("#department_select").val();
14 | 
15 |     // send value via GET to URL /<department_id>
16 |     var get_request = $.ajax({
17 |       type: 'GET',
18 |       url: '/department/' + department_id + '/',
19 |     });
20 | 
21 |     // handle response
22 |     get_request.done(function(data){
23 | 
24 |       // data
25 |       console.log(data)
26 | 
27 |       // add values to list 
28 |       var option_list = [["", "Select an employee"]].concat(data);
29 |       $("#employee_select").empty();
30 |         for (var i = 0; i < option_list.length; i++) {
31 |           $("#employee_select").append(
32 |             $("<option></option>").attr("value", option_list[i][0]).text(option_list[i][1]));
33 |         }
34 |       // show model list
35 |       $("#employee_select").show();
36 |     });
37 |   });
38 | 
39 |   $("#submit-btn").click(function() {
40 | 
41 |     // grab values
42 |     var department = $("#department_select").find(":selected").text();
43 |     var employee = $("#employee_select").find(":selected").text();
44 |     var department_id = $("#department_select").val();
45 |     var employee_id = $("#employee_select").val();
46 | 
47 |     // append values to the DOM
48 |     $("#chosen_department").html(department);
49 |     $("#chosen_employee").html(employee);
50 |     $("#chosen_department_id").html(department_id);
51 |     $("#chosen_employee_id").html(employee_id);
52 | 
53 |     // show values selected
54 |     $("#show_selection").show();
55 |     // enable refresh button
56 |     $("#refresh-btn").prop("disabled", false)
57 |     // disable submit button
58 |     $("#submit-btn").prop("disabled", true);
59 | 
60 |     // disable dropdown inputs
61 |     $("#employee_select").prop("disabled", true);
62 |     $("#department_select").prop("disabled", true);
63 |     $("#employee_select").prop("disabled", true);
64 |   });
65 | 
66 |   $("#refresh-btn").click(function() {
67 | 
68 |     // remove values to the DOM
69 |     $("#chosen_department").html("");
70 |     $("#chosen_employee").html("");
71 |     $("#chosen_department_id").html("");
72 |     $("#chosen_employee_id").html("");
73 | 
74 |     // hide values selected
75 |     $("#show_selection").hide();
76 |     // disable refresh button
77 |     $("#refresh-btn").prop("disabled", true);
78 |     // enable submit button
79 |     $("#submit-btn").prop("disabled", false);
80 |     // hide model list
81 |     $("#employee_select").hide();
82 | 
83 |     // enable dropdown inputs
84 |     $("#employee_select").prop("disabled", false);
85 |     $("#department_select").prop("disabled", false);
86 | 
87 |    
88 |   });
89 | 
90 | });


--------------------------------------------------------------------------------
/sql-example/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Flask - AJAX Form</title>
 6 |     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 7 |     <link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet">
 8 |   </head>
 9 |   <body>
10 | 
11 |     <div class="container">
12 |       <h1>Select a department</h1><br><br>
13 | 
14 |       <div id="department_selection">
15 |         <form action="/" method="POST">
16 |           {{ form.hidden_tag() }}
17 |           {{ form.department(id="department_select", class="form-control") }}
18 |           <br>
19 |           {{ form.employee(id="employee_select", class="form-control") }}
20 |           <br><br>
21 |           <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
22 |           <button type="button" class="btn btn-success" id="refresh-btn">Refresh</button>
23 |         </form>
24 |       </div>
25 | 
26 |       <br><br>
27 | 
28 |       <div id="show_selection">
29 |         <h2>You selected:</h2>
30 |         <table class="table">
31 |           <thead>
32 |             <tr>
33 |               <th>Department ID</th>
34 |               <th>Department</th>
35 |               <th>Employee ID</th>
36 |               <th>Employee</th>
37 |             </tr>
38 |           </thead>
39 |           <tbody>
40 |             <tr>
41 |               <td><span id="chosen_department_id"></span></td>
42 |               <td><span id="chosen_department"></td>
43 |               <td><span id="chosen_employee_id"></span></td>
44 |               <td><span id="chosen_employee"></td>
45 |             </tr>
46 |           </tbody>
47 |         </table>
48 |       </div>
49 | 
50 |     </div>
51 | 
52 |     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
53 |     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
54 |     <script src="{{ url_for('static', filename='main.js') }}"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/sql-example/test.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjhea0/flask-ajax-form/0fac373c8bb067d89901d86546396ad7138d69da/sql-example/test.db


--------------------------------------------------------------------------------
/sqlalchemy-example/app.py:
--------------------------------------------------------------------------------
1 | from hello import app, db
2 | 
3 | if __name__ == '__main__':
4 |     app.run(debug=True)
5 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/__init__.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask
 2 | from flask.ext.sqlalchemy import SQLAlchemy
 3 | 
 4 | app = Flask(__name__)
 5 | app.config.from_object('hello.config')
 6 | 
 7 | db = SQLAlchemy(app)
 8 | 
 9 | import models
10 | import views
11 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/config.py:
--------------------------------------------------------------------------------
1 | SECRET_KEY = 'I\'ll never tell'
2 | SQLALCHEMY_DATABASE_URI = 'sqlite:///test.db'
3 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/db_init.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | 
 3 | 
 4 | def init_db():
 5 |     connection = sqlite3.connect('test.db')
 6 |     with connection as db:
 7 |         with open('schema.sql') as f:
 8 |             line = f.read()
 9 |             db.cursor().executescript(line)
10 |         db.commit()
11 | 
12 | 
13 | if __name__ == '__main__':
14 |     init_db()


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/form.py:
--------------------------------------------------------------------------------
1 | from flask.ext.wtf import Form
2 | from wtforms import SelectField
3 | 
4 | 
5 | class TestForm(Form):
6 |     department = SelectField(u'', choices=())
7 |     employee = SelectField(u'', choices=())
8 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/models.py:
--------------------------------------------------------------------------------
 1 | from hello import db
 2 | 
 3 | 
 4 | class Department(db.Model):
 5 |     __tablename__ = 'departments'
 6 |     id = db.Column(db.Integer, primary_key=True)
 7 |     name = db.Column(db.Text, nullable=False)
 8 | 
 9 |     def __init__(self, name):
10 |         self.name = name
11 | 
12 | 
13 | class Employee(db.Model):
14 |     __tablename__ = 'employees'
15 |     id = db.Column(db.Integer, primary_key=True)
16 |     name = db.Column(db.Text, nullable=False)
17 |     department_id = db.Column(db.Integer, db.ForeignKey('departments.id'))
18 | 
19 |     def __init__(self, name):
20 |         self.name = name
21 | 
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/schema.sql:
--------------------------------------------------------------------------------
 1 | BEGIN;
 2 | 
 3 | 
 4 | DROP TABLE IF EXISTS departments;
 5 | CREATE TABLE departments (
 6 |     id              INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
 7 |     name            VARCHAR(50)
 8 | );
 9 | 
10 | 
11 | DROP TABLE IF EXISTS employees;
12 | CREATE TABLE employees (
13 |     id              INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
14 |     name            VARCHAR(100),
15 |     department_id   INTEGER,
16 |     FOREIGN KEY(department_id) REFERENCES departments(id)
17 | );
18 | 
19 | 
20 | COMMIT;
21 | 
22 | INSERT INTO departments (id, name) VALUES (1, "Accounting");
23 | INSERT INTO departments (id, name) VALUES (2, "Sales");
24 | INSERT INTO departments (id, name) VALUES (3, "Management");
25 | 
26 | INSERT INTO employees (id, name, department_id) VALUES (1, "Kyra Davis", 1);
27 | INSERT INTO employees (id, name, department_id) VALUES (2, "Abigail Whitfield", 1);
28 | INSERT INTO employees (id, name, department_id) VALUES (3, "Maya Chase", 1);
29 | INSERT INTO employees (id, name, department_id) VALUES (4, "Lydia Hyde", 1);
30 | INSERT INTO employees (id, name, department_id) VALUES (5, "Wynne Erickson", 2);
31 | INSERT INTO employees (id, name, department_id) VALUES (6, "Candice Davidson", 2);
32 | INSERT INTO employees (id, name, department_id) VALUES (7, "Lawrence Roman", 2);
33 | INSERT INTO employees (id, name, department_id) VALUES (8, "Kameko Parker", 2);
34 | INSERT INTO employees (id, name, department_id) VALUES (9, "Jamal Everett", 3);
35 | INSERT INTO employees (id, name, department_id) VALUES (10, "Avram Burks", 3);
36 | INSERT INTO employees (id, name, department_id) VALUES (11, "Mia Mendez", 3);
37 | INSERT INTO employees (id, name, department_id) VALUES (12, "Ila Cantrell", 3);


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/static/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   padding-top: 50px;
3 |   max-width: 500px;
4 | }
5 |  #employee_select, #show_selection {
6 |   display: none;
7 | }


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/static/main.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 | 
 3 |   // test to ensure jQuery is working
 4 |   console.log("whee!")
 5 | 
 6 |   // disable refresh button
 7 |   $("#refresh-btn").prop("disabled", true)
 8 |   
 9 | 
10 |   $("#department_select").change(function() {
11 | 
12 |     // grab value
13 |     var department_id = $("#department_select").val();
14 | 
15 |     // send value via GET to URL /<department_id>
16 |     var get_request = $.ajax({
17 |       type: 'GET',
18 |       url: '/department/' + department_id + '/',
19 |     });
20 | 
21 |     // handle response
22 |     get_request.done(function(data){
23 | 
24 |       // data
25 |       console.log(data)
26 | 
27 |       // add values to list 
28 |       var option_list = [["", "Select an employee"]].concat(data);
29 |       $("#employee_select").empty();
30 |         for (var i = 0; i < option_list.length; i++) {
31 |           $("#employee_select").append(
32 |             $("<option></option>").attr("value", option_list[i][0]).text(option_list[i][1]));
33 |         }
34 |       // show model list
35 |       $("#employee_select").show();
36 |     });
37 |   });
38 | 
39 |   $("#submit-btn").click(function() {
40 | 
41 |     // grab values
42 |     var department = $("#department_select").find(":selected").text();
43 |     var employee = $("#employee_select").find(":selected").text();
44 |     var department_id = $("#department_select").val();
45 |     var employee_id = $("#employee_select").val();
46 | 
47 |     // append values to the DOM
48 |     $("#chosen_department").html(department);
49 |     $("#chosen_employee").html(employee);
50 |     $("#chosen_department_id").html(department_id);
51 |     $("#chosen_employee_id").html(employee_id);
52 | 
53 |     // show values selected
54 |     $("#show_selection").show();
55 |     // enable refresh button
56 |     $("#refresh-btn").prop("disabled", false)
57 |     // disable submit button
58 |     $("#submit-btn").prop("disabled", true);
59 | 
60 |     // disable dropdown inputs
61 |     $("#employee_select").prop("disabled", true);
62 |     $("#department_select").prop("disabled", true);
63 |     $("#employee_select").prop("disabled", true);
64 |   });
65 | 
66 |   $("#refresh-btn").click(function() {
67 | 
68 |     // remove values to the DOM
69 |     $("#chosen_department").html("");
70 |     $("#chosen_employee").html("");
71 |     $("#chosen_department_id").html("");
72 |     $("#chosen_employee_id").html("");
73 | 
74 |     // hide values selected
75 |     $("#show_selection").hide();
76 |     // disable refresh button
77 |     $("#refresh-btn").prop("disabled", true);
78 |     // enable submit button
79 |     $("#submit-btn").prop("disabled", false);
80 |     // hide model list
81 |     $("#employee_select").hide();
82 | 
83 |     // enable dropdown inputs
84 |     $("#employee_select").prop("disabled", false);
85 |     $("#department_select").prop("disabled", false);
86 | 
87 |    
88 |   });
89 | 
90 | });


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Flask - AJAX Form</title>
 6 |     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 7 |     <link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet">
 8 |   </head>
 9 |   <body>
10 | 
11 |     <div class="container">
12 |       <h1>Select a department</h1><br><br>
13 | 
14 |       <div id="department_selection">
15 |         <form action="/" method="POST">
16 |           {{ form.hidden_tag() }}
17 |           {{ form.department(id="department_select", class="form-control") }}
18 |           <br>
19 |           {{ form.employee(id="employee_select", class="form-control") }}
20 |           <br><br>
21 |           <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
22 |           <button type="button" class="btn btn-success" id="refresh-btn">Refresh</button>
23 |         </form>
24 |       </div>
25 | 
26 |       <br><br>
27 | 
28 |       <div id="show_selection">
29 |         <h2>You selected:</h2>
30 |         <table class="table">
31 |           <thead>
32 |             <tr>
33 |               <th>Department ID</th>
34 |               <th>Department</th>
35 |               <th>Employee ID</th>
36 |               <th>Employee</th>
37 |             </tr>
38 |           </thead>
39 |           <tbody>
40 |             <tr>
41 |               <td><span id="chosen_department_id"></span></td>
42 |               <td><span id="chosen_department"></td>
43 |               <td><span id="chosen_employee_id"></span></td>
44 |               <td><span id="chosen_employee"></td>
45 |             </tr>
46 |           </tbody>
47 |         </table>
48 |       </div>
49 | 
50 |     </div>
51 | 
52 |     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
53 |     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
54 |     <script src="{{ url_for('static', filename='main.js') }}"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/test.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjhea0/flask-ajax-form/0fac373c8bb067d89901d86546396ad7138d69da/sqlalchemy-example/hello/test.db


--------------------------------------------------------------------------------
/sqlalchemy-example/hello/views.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from flask import Flask, request, render_template, make_response
 3 | from form import TestForm
 4 | from hello import app, db
 5 | from models import Department, Employee
 6 | 
 7 | @app.route("/department", methods=["GET", "POST"])
 8 | def index():
 9 |     """
10 |     Render form and handle form submission
11 |     """
12 |     form = TestForm(request.form)
13 |     departments = Department.query.all()
14 |     form.department.choices = [('', 'Select a department')] + [
15 |         (department.id, department.name) for department in departments]
16 |     chosen_department = None
17 |     chosen_employee = None
18 |     
19 |     return render_template('index.html', form=form)
20 | 
21 | 
22 | @app.route("/department/<int:department_id>/", methods=["GET"])
23 | def get_request(department_id):
24 |     """
25 |     Handle GET request to - /<department_id>/
26 |     Return a list of tuples - (<employee id>, <employee name>)
27 |     """
28 |     employees = Employee.query.all()
29 | 
30 |     data = [
31 |         (employee.id, employee.name) for employee in employees 
32 |         if employee.department_id == department_id
33 |     ]
34 |     response = make_response(json.dumps(data))
35 |     response.content_type = 'application/json'
36 |     return response


--------------------------------------------------------------------------------
/sqlalchemy-example/requirements.txt:
--------------------------------------------------------------------------------
 1 | Flask==0.10.1
 2 | Flask-SQLAlchemy==1.0
 3 | Flask-WTF==0.9.5
 4 | Jinja2==2.7.2
 5 | MarkupSafe==0.23
 6 | SQLAlchemy==0.9.4
 7 | WTForms==2.0
 8 | Werkzeug==0.9.4
 9 | itsdangerous==0.24
10 | wsgiref==0.1.2
11 | 


--------------------------------------------------------------------------------