Обновление данных без перезагрузки jinja2

202
02 марта 2018, 19:19

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

@app.route('/personal_account', methods=['POST'])
def welcome():
    login =  request.form['login']
    data = get_default_user_data(login)
    # ... processing
    return render_sidebar_template("personal_account.html", data=data)

По этим данным (data) строиться график с помощью chartist.js.

personal_account.html

<div id="data">
    <ul id="consumed_values">
        {% set count = 0 %}
        {% for i in data.consumed_values %}
            <li>{{  data.consumed_values[count] }}</li>
        {% set count = count + 1 %}
        {% endfor %}
    </ul>
</div>
<canvas width="800" height="600" id="canvas"></canvas>
<button id="button">Обновить</button>

Необходимо обновлять данные без перезагрузки страницы. Использую ajax.

В этой функции происходит запрос в питоновскую функцию get_selected_values(), которая отдает новые данные на страницу html, но данные в jinja2 на странице не меняются.

personal_account.js

window.onload = draw(); 
function draw() {
    var consumed_values = document.querySelectorAll('ul#consumed_values li');
    var values = new Array();
    for (var i = 0; i < consumed_values.length; i++) {
        console.log(consumed_values[i].innerHTML);  //значения за все дни
        values[i] = consumed_values[i].innerHTML;
    }

    var numbers = new Array();
    for(var i=0; i<consumed_values.length; i++)
    {
        numbers[i]=i+1;  //массив меток
        console.log(numbers[i]);
    }
    var ctx = document.getElementById('canvas').getContext('2d');
            var grapf = {
                labels : numbers,
                datasets : [
                    {
                        strokeColor : "#6181B4",
                        data : values
                    }
                ]
            }
        new Chart(ctx).Line(grapf);
}
document.getElementById('button').onclick=function () {
        request();
}
function reques() { 
    var first = selected[0];
    var second = selected[1];
    first.month = first.month+1;
    second.month = second.month+1;
    $.ajax({
        type: 'POST',
        url: '/get_selected_values',
        success: function(response) {
            alert('Ok');
            draw();
        },
        error: function() {
            alert('Error');
        }
    });
}

Функция get_selected_values()

@app.route('/get_selected_values', methods=['POST'])
def get_selected_values():
    # ... 
    data = fetch_selected_date(start_date=start_date, end_date=end_date, login=current_user.get_id())
    if data:
        # return jsonify({'result': True, 'data': data}) # does not work this way
    # return  jsonify({'result': False, 'data': []})
    return render_sidebar_template("personal_account.html", data=data, result=1)

Как добиться, того, чтобы данные обновлялись, и перерисовывался график?

READ ALSO
javascript google spreadsheets

javascript google spreadsheets

Добрый деньЗадача следующая: - Есть источник данных в гугл таблице с содержанием городов и информации по ним (города в колонке B:B, формула...

239
небольшая задачка по React Js [требует правки]

небольшая задачка по React Js [требует правки]

Это задание требуется выполнить на React Js, тут нужно поля ввода, но как данные из него отправить или взять с помощью методов я не могу понять

216