Flask SelectField using Ajax

[noah_f]

Hi, Trying to get a Web Application up and Running: I am trying to do an SQL SELECT Statement based on the First Select-field while i select an item within the first Select Field I'm receiving a 404 Error:

127.0.0.1 - - [23/Mar/2020 15:43:44] "GET /create-vm HTTP/1.1" 200 -
127.0.0.1 - - [23/Mar/2020 15:43:44] "GET /category/VC-AMS01 HTTP/1.1" 404 -
127.0.0.1 - - [23/Mar/2020 15:43:54] "GET /category/VC-OBIEE-SD01 HTTP/1.1" 404 -
127.0.0.1 - - [23/Mar/2020 15:43:59] "GET /category/VC-VDESK-LASCOL HTTP/1.1" 404 -
127.0.0.1 - - [23/Mar/2020 15:44:04] "GET /category/VC-ORCLAPPS-LASCOLO1 HTTP/1.1" 404 -
127.0.0.1 - - [23/Mar/2020 15:54:48] "GET /category/VC-QCT-BLR01 HTTP/1.1" 404 -

from flask import Flask, render_template, g, flash, jsonify
from flask_wtf import FlaskForm
from wtforms import SelectField
from flask_mysqldb import MySQL

app = Flask(__name__)
mysql = MySQL(app)
app.config["SECRET_KEY"] = 'secretkey'
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = ''
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = ''

class CreateForm(FlaskForm):
    vcenter = SelectField("Category", coerce=str)
    datacenter = SelectField("Datacenter", coerce=str)


@app.route("/cat/<int:Vcenter>")
def category(Vcenter):
    c = mysql.connection.cursor()
    c.execute("""SELECT Datacenter, Datacenter FROM vsphere.test
                 WHERE Vcenter = ?""",
                 (Vcenter)
    )
    datacentercategories = c.fetchall()

    return jsonify(datacentercategories=datacentercategories)


@app.route('/')
def home():
    
    return render_template("home.html")

@app.route("/create-vm", methods=["GET","POST"])
def create():
    cur = mysql.connection.cursor()
    form = CreateForm()
    cur.execute("SELECT distinct Vcenter, Vcenter From vsphere.test")
    vcentercategories = cur.fetchall()
    form.vcenter.choices = vcentercategories
    
    
    cur.execute("SELECT distinct Datacenter, Datacenter From vsphere.test")
    datacentercategories = cur.fetchall()
    form.datacenter.choices = datacentercategories
    return render_template("create.html", form=form)


@app.route("/delete-vm", methods=["GET", "POST"])
def delete():
    return render_template("delete.html")


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

My HTML code is as follows:

{% extends 'base.html' %}
{% set active_page = 'create' %}
{% block title %}Create VM - {% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-7 offset-lg-2 my-5">
      <h1>Delete Virtual Machine</h1><hr>
      <form method="POST" action="{{ url_for('create') }}">
       
        <div class="form-group">
          {{ form.vcenter.label }}
          {{ form.vcenter(class="form-control") }}
        </div>
        <div class="form-group">
          {{ form.datacenter.label }}
          {{ form.datacenter(class="form-control") }}
        </div>

        </form>
      </div>
{% endblock %}
{% block javascript %}
<script>
  $(function(){

    function subcategory_change(){
      var Vcenter = $("#vcenter").val();
      $.ajax({
        type: "GET",
        url: "/category/" + Vcenter
      }).done(function(data){
        $("#datacenter").empty();
        if($("#vcenter").hasClass("category-filter")){
          $("#datacenter").append(
            $("<option></option>").attr("value", "0").text(" --- ")
          );
        }
        $.each(data.datacentercategories, function(index, value){
          $("#datacenter").append(
            $("<option></option>").attr("value", value[0]).text(value[1])
          );
        });
      });
    }
    $("#vcenter").change(function(){
      subcategory_change();
    });
    subcategory_change();
  });
</script>
{% endblock %}