SQLデータベースからのデータで入力プロパティのJavascriptを使用してライブテーブルを更新しています

Question

ここに時間を置いて、これを動作させようとしています。私はこれを解決しようとすることができるほとんど全ての研究を行っていると確信しており、どこに間違っているのか分かりません。だから、皆さんのお手伝いをさせていただきありがとうございます。私は私のコードを掲載することにより開始します

：

HTML：

{% block main %} 
    <form action="{{ url_for('index') }}" method="post"> 
     <fieldset> 
      <div id ="total" class="form-inline"> 
       <div id="itemBackground" class="col-sm-6"> 
        <div id="itemToolBar" class="row"> 
         <div class="col-sm-6"> 
          <label> 
           Show: 
           <select name="list_length" class="form-control input-sm"> 
            <option value="10">10</option> 
            <option value="25">25</option> 
            <option value="50">50</option> 
            <option value="100">100</option> 
           </select> 
          </label> 

         </div> 
         <div class="col-sm-6" align="right"> 
          <label> 
           Search: 
           <input class="form-control input-sm" autocomplete="off" type="textbox" name="q" id="q" placeholder=""> 
          </label> 
         </div> 
        </div> 

        <table id="itemTable" name="itemTable" class="table table-hover table-inverse"> 
         <thead> 
          <tr id="head"> 
           <th>ID</th> 
           <th>Item</th> 
           <th>Buy</th> 
           <th>Sell</th> 
          </tr> 
         </thead> 
         {% for item in items %} 
          <tr id="rows"> 
           <td scope="row">{{ item[0] }}</td> 
           <td>{{ item[1] }}</td> 
           <td>{{ item[2] }}</td> 
           <td>{{ item[3] }}</td> 
          </tr> 
         {% endfor %} 
        </table> 
       </div> 

       <div id = "vehicleBackground" class="col-sm-6"> 
        <table id="vehicleTable" class="table table-hover table-inverse"> 
         <thead> 
          <tr id="head"> 
           <th>ID</th> 
           <th>Item</th> 
           <th>Buy</th> 
          </tr> 
         </thead> 
         {% for vehicle in vehicles %} 
          <tr id="rows"> 
           <th scope="row">{{ vehicle[0] }}</th> 
           <td>{{ vehicle[1] }}</td> 
           <td>{{ vehicle[2] }}</td> 
          </tr> 
         {% endfor %} 
        </table> 
       </div> 
      </div> 


     </fieldset> 
    </form> 
{% endblock %} 

のPython：

# configure application 
app = Flask(__name__) 

# ensure responses aren't cached 
if app.config["DEBUG"]: 
    @app.after_request 
    def after_request(response): 
     response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate" 
     response.headers["Expires"] = 0 
     response.headers["Pragma"] = "no-cache" 
     return response 


# configure session to use filesystem (instead of signed cookies) 
app.config["SESSION_FILE_DIR"] = gettempdir() 
app.config["SESSION_PERMANENT"] = False 
app.config["SESSION_TYPE"] = "filesystem" 
Session(app) 

@app.route("/", methods=["GET", "POST"]) 
def index(): 
    if request.method == "POST": 
     if not request.form.get("q"): 
      return print("Give me a search query") 
     else: 
      q = request.form.get("q") + "%" 
      print(q) 

      conn = sqlite3.connect('items.db') 
      db = conn.cursor() 

      db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q)) 
      itemList = db.fetchall() 

      db.execute("SELECT * FROM vehicles") 
      vehicleList = db.fetchall() 

      db.close() 
      conn.close() 


      return render_template("index.html", items = itemList, vehicles = vehicleList) 

    # else if user reached route via GET (as by clicking a link or via redirect) 
    else: 

     # configure CS50 Library to use SQLite database 
     conn = sqlite3.connect('items.db') 
     db = conn.cursor() 

     db.execute("SELECT * FROM items") 
     itemList = db.fetchall() 

     db.execute("SELECT * FROM vehicles") 
     vehicleList = db.fetchall() 

     db.close() 
     conn.close() 

     return render_template("index.html", items = itemList, vehicles = vehicleList) 

@app.route("/search") 
def search(): 
    """Search for places that match query.""" 
    print("here") 
    # TODO 
    q = request.args.get("q") + "%" 

    items = db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q)) 

    return jsonify(items) 

Javascriptを：私はこだわっている

// execute when the DOM is fully loaded 
$(document).ready(function() { 
    configure(); 
}); 

/** 
* Configures application. 
*/ 
function configure() 
{ 
    // configure typeahead 
    $("#q").on('input propertychange paste', function() { 
     //$("#q").val("hi"); 

     // get items matching query (asynchronously) 
     var table = "<thead><tr><th>ID</th><th>Item</th><th>Buy</th><th>Sell</th></tr></thead><tr>"; 

     var parameters = { 
      q: $("q").val() 
     }; 

     $.getJSON(Flask.url_for("search"), parameters) 
     .done(function(data) { 
      $('#q').val("hi"); 
      for (var i=0; i<data.length; i++) { 
       obj = data[i]; 
       for (var key in obj) { 
        table += "<td>" + key + "</td>"; 
       } 
      } 
      table += "</tr>"; 

      $("#itemTable").replaceWith(table); 
      //document.getElementById('').innerHTML = table; 
     }) 
     .fail(function() { 
      // log error to browser's console 
      console.log(errorThrown.toString()); 
     }); 
    }); 

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

があります私がチェックするとjavascriptでrテキストボックス入力を変更して、データベースからのクエリと一致するデータでテーブルを更新しようとします。私は実際には "input propertychange paste"セクションに入れます。ボックスに何かが入力されたときはいつでも、テキストボックスの値を "hi"に変更するように設定していますが、次のセクションgetJsonをmy/search python関数から取り出し、それをテーブルにフォーマットして、それから私が作成したものと古いテーブルを置き換えます。

私はあなたに何か情報を与えることができるか分かりませんが、必要なものがいくつか不足していると確信しています。そうすれば私に知らせてください。できれば私に助けてくれてありがとう！

編集： 私のコードがそのgetJSONブロックに到達しないことを追加する必要があります。あなたが見ることができるように、私はgetJSON呼び出しの中で入力テキストボックスの値を変更しようとしますが、テキストボックスは決して "hi"と言うように更新されません。 getJSONの呼び出しが間違っているようですね？わからない。

Edit2： さて、私は今すぐgetJSONコールに入ることができました。ご協力いただきありがとうございます。しかし、今私は私の質問の本当の部分に着いている、私はSQLデータベースからJSONを取得した後にテーブルの書式を設定する方法は？私が知ることから、少なくともほとんど正しい書式設定がありますが、古いテーブルを削除して新しいテーブルを挿入する際に問題が発生する可能性があります。

Answer 1

セレクタ#itemTableはHTMLでは一致しません。 <table>要素nameの属性値は"itemTable"です。要素にHTMLでidが設定されていません。 $("table[name=itemTable]")を使用するか、#itemTableセレクタを使用して既存の<table>要素に一致するように、idを"itemTable"に設定してください。