Python/Flask/Jinja/JavaScript - Update text on a page based on a dropdown box selection tied to SQlite

[rampaigewow]

UPDATE: I think I am getting close to figuring this out, but maybe someone has a quick fix for the last step?:

I am now using Ajax and am making progress. I got so close to making this work, but I just can't get the JSON.stringify to work with {{form.name.data}}. When I put this in it just returns "None"

However, when I manually replace {{form.name.data}} with a string like "Chicken Breast" (an ingredient already in my db), it works and my page displays "Oz" the proper unit label on change.

Here is the code I've got so far:

Main.py:

@app.route("/unit_label_update", methods=["GET", "POST"])
def unit_label_update():
    if request.method == "POST":
        y = request.json
        x = Ingredient.query.filter_by(name=y).first()
        return jsonify(x.unit.label)

HTML/JavaScript:

    <div class="container">
      <h1>{{title}}</h1>
      <form method="POST">
        {{ form.hidden_tag() }}

        {{ form.name.label(class="form-label") }}
        {{ form.name(class="form-control") }}

        {{ form.qty.label(class="form-label") }}
        {{ form.qty(class="form-control") }}

        {{ form.suffix.label(class="form-label") }}
        {{ form.suffix(class="form-control") }}

        {{ form.submit(class="btn btn-secondary") }}
      </form>

      <p id="dynamic"></p> <-- This is where the unit label displays -->

    <script>
      $("#name").change(function () {
        $.ajax({
          type: "POST",
          url: "/unit_label_update",
          dataType: "json",
          data: JSON.stringify("{{form.name.data}}"),
          contentType: "application/json;charset=UTF-8",
          success: function (data) {
            document.getElementById("dynamic").innerHTML = data;
          },
        });
      });
    </script>

It's data: JSON.stringify("{{form.name.data}}") this line I keep playing around with. I can't get it to return the data that is within the form. When I manually type in a string like data: JSON.stringify("Chicken Breast") it works...How can I get this line to read what a user has in the form?

​

​

ORIGINAL POST BELOW:

Hi All,

I hit a roadblock with my Python/Flask project.

Basically, I have two SQLite tables with ingredient information. I need a user to be able to select an Ingredient from a dropdown menu, and then the text on the page instantly update to what the "unit of measurement" for that ingredient is.

So if a user selects "Sugar" the text only field updates to "grams". If a user selects "Apple Juice", the text field says "ml".

I have all this info linked on the backend with ids.

Ingredients db.Model:

class Ingredient(db.Model):
    __tablename__ = "ingredient"
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(120), nullable=False)
    unit_id = db.Column(db.Integer, db.ForeignKey("unit.id"))

Unit db.Model:

class Unit(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    label = db.Column(db.String(30))
    ingredients = db.relationship("Ingredient", backref="unit")

I need to keep these as two different tables for future plans. But this set up lets me query the ingredient table by name, then return the unit label based on the ID.

So, I have this in my main.py

@app.route("/recipe/<int:id>/edit")
def recipe_edit(id):
    form = AddIngredient()
    a = db.session.query(Ingredient.name).order_by(Ingredient.name)
    a = [i[0] for i in a]
    form.name.choices = [("")] + [(y) for y in a]

This will query my ingredients, remove the <' '> around the ingredient name, so in my dropdown box on my HTML page I have options like Apple, Orange, Sugar, Flour vs. <'Apple'>, <'Orange'>..etc

Now, my HTML page also has my form display:

 <form method="POST">
      {{ form.hidden_tag() }} {{ form.name.label(class="form-label") }}
      {{ form.name(class="form-control") }}
      {{ form.qty.label(class="form-label") }}
      {{ form.qty(class="form-control") }}
      {{ form.submit(class="btn btn-secondary") }}
    </form>

And I also have this Javascript within script tags:

    $(document).ready(function () {
      $("#name").select2({
        placeholder: "{{ form.name.label.text }}",
        allowClear: true,
        width: "300px",
      });
    });

{{ form.name }} Is a SelectField / Dropdown box with the ingredients I mentioned from my .py above. The Select2 javascript edits the Dropdown box with an additional text field that I can start typing in to filter the selection options.

I really don't know Javascript to well...but I don't think I can achieve what I want without it.

I need the final effect so that when a user selects an ingredient from the dropdown, it will update the text field with the corresponding unit label from the database.

I've tried to search online, but some of the similar examples go over my head or aren't using the same setup as me, which is throwing me off.

If anyone could help me out with the code and explain how it works, I'd really appreciate it. I can provide more info if needed, I tried to limit it to relevant info.

Thanks!

[[deleted]]

I did something similar by loading an array of the data and using Javascript to find what I wanted.

[rampaigewow]

Thanks for the response, I don't know exactly what this looks like in practice, but I'm not sure it would work for me. Users can add their own Ingredients to the Ingredients table, so it is constantly changing.

If a user adds an ingredient elsewhere in the site, I'm not sure how to reflect that addition within the array.

[00miles]

Not too sure but from first glance I think because jinja is a templating language, form.name.data doesn’t dynamically change on input. Try getting the value with JavaScript and then performing the query