Knockout bevölkert Tabelle mit sqlalchemy Abfrage

Ich schrieb eine Frage zuvor und die Antwort mit einer Frage verknüpft, die nicht geholfen hat und das Problem hat sich seitdem entwickelt, so ist hier eine neue Frage Dies ist die Gesamtheit meiner HTML-Datei, die ich benutze um die Ergebnisse einer Abfrage in meine Datenbank zu stellen. Die Abfrage funktioniert ordnungsgemäß und es gibt die JSON-Informationen zurück, wie es sollte, aber ich bin mir nicht sicher, wie ich den JSON aus der Antwort nehme und die Tabelle befülle, ohne die Seite neu zu laden. Was momentan passiert, ist, dass ich die Tabelle ausfülle, um die Datenbank abzufragen, die Ergebnisse werden dann zu json serialisiert und die Seite zeigt dann die JSON-Informationen an (dies wird alles durch meine Flaschenroute-Deklaration gehandhabt.) Was ich erreichen möchte, ist kein Nachladen stattdessen es füllt nur die Tabelle mit den Ergebnissen in das richtige FeldKnockout bevölkert Tabelle mit sqlalchemy Abfrage

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Reports</title> 
</head> 
<body> 
{% extends "layout.html" %} 
{% block content %} 
    <div class="index"> 
    <h1>Report Generation</h1> 
     <p>Search for accounts to generate a report for.</p> 
<div class="jumbotron"> 
     <form class="form-signin" method="post" id="query"> 
     <label for="searchFirst" class="sr-only">First Name</label> 
      <input type="name" value="{{request.form.searchFirst}}" name="searchFirst" id="searchFirst" class="form-control" placeholder="First Name" required autofocus> 
     <label for="searchLast" class="sr-only">Last Name</label> 
      <input type="name" value="{{request.form.searchLast}}" name="searchLast" id="searchLast" class="form-control" placeholder="Last Name"> 
     <label for="searchPhone" class="sr-only">Phone Number</label> 
      <input type="name" value="{{request.form.searchPhone}}" name="searchPhone" id="searchPhone" class="form-control" placeholder="Phone Number"> 
       <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="submit">Search</button> 
     </form> 
     </div> 
    <br> 
     <div id="results"> 
       <table class="blueTable" id="queries"> 
<thead> 
<tr> 
    <th>Policy(ies) ID</th> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Street</th> 
    <th>City</th> 
    <th>State</th> 
    <th>Zip Code</th> 
    <th>Phone Number</th> 
</tr> 
</thead> 
<tbody> 
<tr data-bind="foreach: viewModel.queries"> 
    <td data-bind="text: id"></td> 
    <td data-bind="text: first"></td> 
    <td data-bind="text: last"></td> 
    <td data-bind="text: street"></td> 
    <td data-bind="text: city"></td> 
    <td data-bind="text: state"></td> 
    <td data-bind="text: zipcode"></td> 
    <td data-bind="text: phonenumber"></td> 
</tr> 
</tbody> 
</table> 
     </div> 

    </div> 
<script type="text/javascript"> 
$(function() { 
    ko.applyBindings(viewModel); 
    viewModel.loadQueries() 
}); 

    function result(result){ 
     this.id = ko.observable(result.id); 
     this.first = ko.observable(result.first); 
     this.last = ko.observable(result.last); 
     this.street = ko.observable(result.street); 
     this.city = ko.observable(result.city); 
     this.state = ko.observable(result.state); 
     this.zipcode = ko.observable(result.zipcode); 
     this.phonenumber = ko.observable(result.phonenumber); 
    } 

    var viewModel = { 
    queries: ko.observableArray([]), 
    loadQueries: function() { 
     var self = this; 
     $.getJSON("/process",function (queries) { 
       self.queries.removeAll(); 
       self.queries(queries) 
      } 
     ); 
    } 
}; 

    $('#query').submit(function (e) { 
     $.postJSON('/reports', query, result()); 
     e.preventDefault(); 
    }); 

    jQuery.extend({ 
     postJSON: function(url, data, callback) { 
     return jQuery.ajax({ 
      type: "POST", 
      url: '/reports', 
      data: typeof data == 'string'?data:JSON.stringify(data), 
      success: callback, 
      dataType: url, 
      contentType: "application/json", 
      processData: false 
     }); 
     } 
    }); 
</script> 
{% endblock %} 
</body> 
</html>

Dies ist, wie mein json

{ 
    "contacts": [ 
    { 
     "city": "your city", 
     "first": "No", 
     "id": 6, 
     "last": "Policy", 
     "phonenumber": "0000000000", 
     "state": "your state", 
     "street": "123 Main St", 
     "zipcode": "00000" 
    } 
    ] 
}

Quelle

2017-12-11 Trevor

Sie müssen Ihre 'foreach' Bindung zu' foreach: queries' ändern. Der Reload-Teil ist nicht klar. Sie möchten die Daten nach '$ .postJSON ('/ reports')' 'aktualisieren? – adiga

brauchen in Ihrem JavaScript-Block zurückgegeben wird Sie definieren, was Ihre Callback-Funktion sein muss. Sie verwenden es als Argument für Ihre Post-Funktion, aber ich vermute, dass es derzeit nicht definiert ist. Dies ist die Funktion, die für den Erfolg in der Ajax-Kommunikation benötigt wird.

function callback(data) { 
    // do something here 
} 

$('#query').submit(function (e) { 
    $.postJSON('/reports', query, result()); 
    e.preventDefault(); 
}); 

jQuery.extend({ 
    postJSON: function(url, data, callback) { 
    return jQuery.ajax({ 
     type: "POST", 
     url: '/reports', 
     data: typeof data == 'string'?data:JSON.stringify(data), 
     success: callback, 
     dataType: url, 
     contentType: "application/json", 
     processData: false 
    }); 
    }

Quelle

2017-12-12 10:27:35

Knockout bevölkert Tabelle mit sqlalchemy Abfrage

Antwort

Verwandte Themen