Шаблон Flask Jinja2 перезагрузить сгенерированную таблицу по нажатию кнопки

Question

У меня есть приложение, работающее через колбу, которое будет использоваться для автоматической подготовки серверов на моей облачной платформе.

На одной из страниц можно загрузить электронную таблицу, которая затем анализируется в интерактивном (редактируемом) html <table>.

После заполнения таблицы заполненные поля проверяются.Если какие-либо поля являются недопустимыми, класс поля изменится, чтобы выделить место, где конечный пользователь должен был бы редактировать.

Затем есть кнопка проверки, которая берет текущую таблицу html и снова запускает проверку, что прекрасно работает.Однако он не перезагружает таблицу html, поэтому любые недопустимые поля, которые были изменены пользователем, остаются подсвеченными из-за того, что класс не изменяется.

Что мне нужно изменить здесь, чтобы обеспечить получение таблицыобновился?

Вот код.

Настой:

# upload spreadsheet and validate
@app.route('/upload/', methods=['GET','POST'])
def upload():
    # if a file is attempted to be uploaded, save file and parse it
    if request.method == 'POST' and request.files:
        f = request.files['file']
        f.save(os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(f.filename)))
        myexcel = os.path.join(app.config['UPLOAD_FOLDER'], f.filename)
        myJson = exc.Parse(myexcel)
        mySpreadsheet = spreadsheet.zip_list(myJson)
        return render_template('upload2.html', spreadsheet=mySpreadsheet)
    # if the validate button is clicked, validate and repopulate table:
    elif request.method == 'POST' and not request.files:
        data = request.get_json()
        data = json.loads(str(data['rows']).replace("'",'"'))
# Test print. this prints the data as expected on click of the validate button
        pprint(data) 
        mySpreadsheet = spreadsheet.zip_list(data)
        return render_template('upload2.html', spreadsheet=mySpreadsheet)
    else:
        return render_template('upload2.html')

Таблица HTML:

(да, это массивная таблица!)

<!-- bunch of table headers here -->
{% for row in spreadsheet %}
  <tr class="{{ loop.cycle('color1', 'color2') }}">
  {% for i in range(36) %}
    {% if "-invalid" in row[i]|string %}
      <td contenteditable="true" class="red table-editable">{{ row[i]|replace("-invalid", "") }}</td>
    {% else %}
      <td contenteditable="true" class="table-editable">{{ row[i] }}</td>
    {% endif %}
  {% endfor %}
{% endfor %}

Проверка HTML:

<div class="container">
  <button id="validate" value="validate" class="button" >Validate Spreadsheet</button>
</div>

Jquery / AJAX:

// on validate, send potentially updated table in json format to flask
$('#validate').click(function() {
var $table = $("table")
    rows = [],
    header = [];
$table.find("thead th").each(function () {
    header.push($.trim($(this).text()));
});
$table.find("tbody tr").each(function () {
    var row = {};
    $(this).find("td").each(function (i) {
        var key = header[i],
            value = $(this).text();
        row[key] = value;
    });
    rows.push(row);
});
    $.ajax({
        type: "POST",
        contentType: "application/json;charset=utf-8",
        url: "/upload/",
        traditional: "true",
        data: JSON.stringify({rows}),
        dataType: "json"
    });
});

Таким образом, AJAX отправляет данные в колбу без проблем, но когда этот оператор elif получен, он, похоже, не рендерит шаблонс новыми данными.

Извините за длинный пост, и заранее спасибо за любую помощь!

Answer 1

Итак, как вы говорите сами, всю проблему можно резюмировать в этом предложении:

Таким образом, AJAX отправляет данные в колбу без проблем, но когда это утверждение elif берется, оно неПохоже, что он повторно отображает шаблон с новыми данными.

Это потому, что при отправке запроса POST ответ сервера не интерпретируется автоматически.Вы должны что-то сделать с ответом сервера, например, сделать это.

Итак, вам нужно добавить параметр успеха в ваш запрос ajax:

$.ajax({
    type: "POST",
    contentType: "application/json;charset=utf-8",
    url: "/upload/",
    traditional: "true",
    data: JSON.stringify({rows}),
    dataType: "json",
    success: function(response){
        console.log(response)
        document.open();
        document.write(response);
        document.close();
    },
    error: function (jqXHR, status, err) {
      console.log(jqXHR, status, err);
    }
});

Поскольку ваш сервер в настоящее время отвечает полностью отображаемой HTML-страницей, вы можете перезаписать существующее содержимое вашей страницы.что показано в примере (хотя плохая практика).

Было бы лучше создать новый маршрут, особенно для проверки правильности всего, что в таблице.Вы также можете решить эту проблему, используя onChange() в html td, и написать функцию javascript, которая проверяет, является ли ввод действительным, чтобы предотвратить весь вызов ajax.