Тестирование встроенного HTML значения AJAX с JINJA

Question

У меня есть AJAX вызов на мой flask сервер, который возвращает данные, затем я могу динамически отображать значение в моем html, используя id s html.

Проблема в том, что я хочу расширить это так, чтобы в зависимости от возвращаемого значения я хотел изменить цвет компонента в html.

Я пытался реализовать условный тест в jinja, но он всегда не проходит тест.

AJAX

(function poll() {
    $.ajax({
        url: "/get_data",
        type: "GET",
        success: function(data) {
            console.log("polling");
            $("#press_switch").text(data.press_sw);
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 1000),
        timeout: 500
    })
})();

HTML

<div class="row">
    <div class="col-sm-6">
        {% if press_switch == 1 %}
           <div class="alert alert-success" role="alert">OK</div>
        {% else %}
           <div class="alert alert-warning" role="alert">FAULT</div>
        {% endif %}
    </div>
</div>

Я пытался проверить состояние 'press_switch and press_sw and testing for a string i.e.' 1 'rather than a numeric value, but I always get the false.

Answer 1

Отказ от ответственности : из вопроса неясно когда вы хотите изменить цвет компонентов.Я предполагаю, что это безоговорочно всякий раз, когда вы нажимаете кнопку (которая запускает вызов jQuery).Если вы обновите свой вопрос, дайте мне знать, чтобы изменить его соответствующим образом.

Когда вы делаете асинхронный вызов на веб-странице (или ajax), вы должны возвращать только предполагаемое значение.Обычно это , а не HTML-фрагмент, как в вашем шаблоне Jinja2.

Я предлагаю, чтобы в вашем маршруте (или функции просмотра) вы добавили проверку асинхронного запроса, а затем только вернули необходимое значениевернуться к клиенту.На стороне клиента вы должны обновить цвета элементов, установив его в полученное значение.

То, что я имею в виду, будет выглядеть примерно так, как показано ниже.

В колбесторона:

@app.route('/get_data')
def get_data_function():
    ...
    if request.args.get('to_ajax', False):
        # actually calculate return value
        return jsonify({'result': 'red'})
    ...

На стороне клиента:

(function poll() {
    $.ajax({
        url: "/get_data?to_ajax=1",
        type: "GET",
        success: function(data) {

            console.log("polling");
            var color = data.result ? "green" : "red";
            console.log("Received: ", data.result, " set to: ", color);
            $("#press_switch").css('color', color);
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 1000),
        timeout: 500
    })
})();

Обратите внимание:

1. Колба устарела request.is_xhr , потому чтонет никакого детерминированного способа узнать, что он вызывается асинхронно - вот почему я добавил ?is_ajax=1 к параметрам запроса (и проверю это на бэкенде).
2. Когда вы фактически получаете запрос нана стороне клиента вы должны принять соответствующие меры, поэтому для функции success вам нужно изменить цвет компонентов, задав для него полученное значение.