update sqlite database in python after the item from dropdown suggestions selected

问题

My program must update table "idlist" in python after the item was selected from drop down suggestions in js. User selects the item, after that POST request in python adds it to the "idlist" table. As I run the program I get the following error message:

I am grateful for your ideas and suggestions:

Here is my python code:

def search():
    """Search for books that match query"""
    if request.method == "GET":
        if not request.args.get("q"):
            return render_template("adjust.html")
        else:
            q = request.args.get("q")  + "%"
            books = db.execute("SELECT Title, Author FROM book WHERE Title LIKE :q OR Author LIKE :q", q=q)
        return jsonify(books)
    if request.method == "POST" and request.form.get("title"):
        Title = request.form.get("title")
        insert_book = db.execute("INSERT INTO idlist (id,Title1, Status) VALUES (:id, :Title1, :Status)", id=session["user_id"], Title1=Title, Status="Not started")
        return redirect("/")
    return render_template("adjust.html")

Here is html:

{% extends "layout.html" %}

{% block title %}
    Add your Book
{% endblock %}
{% block main %}
    <form action="/adjust" method="POST">
        <div class="form-group">
        <p>Choose your Book</p>
        <label class="sr-only" for="q">Title, Author</label>
        <input class="form-control" id="q" placeholder="Title, Author" name="title" type="text" autocomplete="off" />
        </div>
        <button class="btn btn-primary" type="submit">Add</button>
    </form>
{% endblock %}

Here is js:

function configure()
{
    // Configure typeahead
    $("#q").typeahead({
        highlight: false,
        minLength: 1
    },
    {
        display: function(suggestion) { return suggestion.Title; },
        limit: 10,
        source: search,
        templates: {
            suggestion: Handlebars.compile(
                "<div>"+
                "{{Title}}, {{Author}}" +
                "</div>"
            )
       }
    });

    // Give focus to text box
    $("#q").focus();
}


// Search database for typeahead's suggestions
function search(query, syncResults, asyncResults)
{
    // Get places matching query (asynchronously)
    let parameters = {
        q: query
    };
    $.getJSON("/adjust", parameters, function(data, textStatus, jqXHR) {

        // Call typeahead's callback with search results (Author Title)
        asyncResults(data);
    });
}

$(document).ready(function() {
   configure();
});

回答1:

Don't use Ajax to Add new book it will make user confused because he don't know if it was added to the idlist or not, use the Form POST instead.

in script.js remove the following block

$("#q").on('typeahead:selected', function a(eventObject, suggestion, name) {
    ...
    ...
 });

and to add selected item to the input form, replace

display: function(suggestion) { return null; },

with

display: function(suggestion) { return suggestion.Title; },

to make form POST, in adjust.html replace

<form action="/adjust">
   ....
   <input class="form-control" id="q" placeholder="Title, Author" type="text"/>

with

<form action="/addbook" method="POST">
    ....
    <input class="form-control" id="q" placeholder="Title, Author" name="title" type="text" autocomplete="off" />

And the addBook() method

@app.route("/addbook", methods=["GET", "POST"])
def addbook():
    """Add selected book"""
    if request.method == "POST" and request.form.get("title"):
        Title = request.form.get("title")
        insert_book = db.execute("INSERT INTO idlist (id,Title1, Status) VALUES (:id, :Title1, :Status)", id=session["user_id"], Title1=Title, Status="Not started")
        return redirect("/")
    # no "title" in the form, return to Add new book page
    return redirect("/adjust")

来源：https://stackoverflow.com/questions/53923637/update-sqlite-database-in-python-after-the-item-from-dropdown-suggestions-select

标签

python

json

typeahead.js

cs50