Имеется сайт, в котором я использую AJAX (через XHR запрос, XMLHttpRequest).
Сервер на пайтоне, на сервере (Python+Flask) генерится выборка из SQLной базы и возвращает через JSON дамп массив с энным количеством объектов внутри (return json.dumps(hystorytable)
),
ответ сервера:
[{"comment": "", "descr": "Salary", "p_id": 82, "quantity": 1, "summ": 21, "totalsum": null, "tranfere_date": "2017-05-04 17:58:34", "user_id": 3}, {"comment": "", "descr": "Salary", "p_id": 81, "quantity": 1, "summ": 2, "totalsum": null, "tranfere_date": "2017-05-04 17:57:41", "user_id": 3}]
Я хочу заменить свою табличку, которая ранее была сгенерена в HTML с помощью цикла Jinja на новую табличку, также сгенеренную с помощью Jinja цикла, но, видимо, Jinja не понимает отпарсенные данные (для генерации начальной таблицы используется return render_template ("index.html", hystorytable=hystorytable)
).
JS-код такой:
var response = JSON.parse(aj.responseText);
$('#history_table').html('');
var insert_table='<table class="table table-striped"><thead><tr><th>Summ</th><th>Description</th><th>Comment</th><th>Date and time</th></tr></thead><tbody>{% for stock in response %}<tr align="center" ><td>{{stock.summ | usd}}</td><td>{{stock.descr}}</td><td>{{stock.comment}}</td><td>{{stock.tranfere_date }}</td></tr>{% endfor %}</tbody></table>';
$('#history_table').html(insert_table);
Цикл Jinja, который генерит первоначальную таблицу (которую я хочу заменить сгенерированной новой таблицей), такой:
<table class="table table-striped">
<thead>
<tr>
<th>Summ</th>
<th>Description</th>
<th>Comment</th>
<th>Date and time</th>
</tr>
</thead>
<tbody>
{% for stock in hystorytable %}
<tr align="center" >
<td>{{stock.summ | usd}}</td><td>{{stock.descr}}</td><td>{{stock.comment}}</td><td>{{stock.tranfere_date }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Я сравниваю текст ответа, полученного при генерации страницы render_template ("index.html", hystorytable=hystorytable)
- смотрю, что из себя представляет hystorytable в питоне - print (hystorytable) с ответом, который получаю через return json.dumps(hystorytable)` (смотрю в JS в responseText) и вижу, что текст одинаковый, но результат получаю разный.
Помогите, пожалуйста, построить новую таблицу...
Огромнейшее спасибо gil9red за подсказку с полем поисков.
Решение
1) Создать в папке template файл table_operations.html
<div name="history_table" id="history_table">
<table class="table table-striped">
<thead>
<tr>
<th>Summ</th>
<th>Description</th>
<th>Comment</th>
<th>Date and time</th>
</tr>
</thead>
<tbody>
{% for stock in hystorytable %}
<tr align="center" >
<td>{{stock.summ | usd}}</td><td>{{stock.descr}}</td><td>{{stock.comment}}</td><td>{{stock.tranfere_date }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
2) в питоне исправить код возврата:
return render_template ("table_operations.html", hystorytable=hystorytable)
3) в JavaScript внести исправления:
$('#history_table').html(aj.responseText);
где history_table - это id моего дива, в котором находится таблица:
<div name="history_table" id="history_table">
...
</div>
На чём быстрее будет скорость выполнения на чистом js или jquery в этом примере?
Как реализовать увеличение позиции ползунка на 20% от левого края каждый раз при нажатии кнопки "Далее", при условии, что выбран ответ?
столкнулся с проблемой что анимация не срабатывает на главной странице если мы возвращаемся с внутриней странице (нажали кнопку назад в браузере),...
Написал html, css и jsВерстка работает, как было сказано заказчиком