Я использую ajax для рендеринга вывода ниже HTML-элемента.
<p class="result-box" id="result-box">The result is : <br><strong id="result"></strong></p>
Все работает нормально при рендеринге результата для 1-го входного запроса. Когда я обновляю свой ввод, консоль изменяет и печатает желаемые данные, но веб-страница, включая текст, не изменяется.
Я получаю Cannot read property 'setAttribute' of null at canvas_and_plot
при втором и более позднем обновлении ниже. Если я удалю setAttribute
, я получу Cannot read property 'getAttribute' of null at canvas_and_plot
.
$(document).on('submit','#cat_select',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'/cat_select',
data:{
l2:$('#l2').val(),
l3:$('#l3').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function server_response(response) {
const r = JSON.parse(response);
console.log(r); //updated
var cat_result = r.cat_result;
console.log(cat_result[0]) //updated
var text=$('<i></i>');
$.each(cat_result, function(idx, value) {
text.append('<id="result'+idx+'">' + cat_result[idx][0]+ '<br>'); //even the text output are not updated
text.append('<canvas id="canv_'+idx+'" width="200" height="200"></canvas><br>');
});
$('#result').replaceWith(text);
$.each(cat_result, function(idx, value) {
canvas_and_plot(idx,cat_result[idx][9],cat_result[idx][10],cat_result[idx][11])});
}
function canvas_and_plot(idx,a,b,c) {
var canv = document.getElementById('canv_'+idx);
canv.setAttribute('id', 'canv_'+idx);
var C = document.getElementById(canv.getAttribute('id'));
//plot...
}
Я попытался добавить cache: false
и добавить случайное число к url
, но ни один из них не работает.
Почему только ошибка после первого запроса? Как я могу это исправить? Спасибо
1 ответ
Причина, по которой он не меняется, заключается в том, что вы заменяете свой блок #result
полученными данными.
$('#result').replaceWith(text);
После этого вы получите доменное дерево, которое выглядит примерно так:
<p class="result-box" id="result-box">
The result is : <br>
<i>
<id="result123">...<br>
<canvas id="canv123" width="200" height="200"></canvas><br>
<id="result321">...<br>
<canvas id="canv321" width="200" height="200"></canvas><br>
</i>
</p>
Таким образом, при втором нажатии не будет элемента с идентификатором #result
.
Я предлагаю (как грубое и быстрое решение):
При каждом запросе удаляйте всех дочерних элементов вашего элемента #result
и снова заполняйте его новыми данными. Поэтому добавьте эту строку перед отправкой запроса - $('#result').empty();
и замените $('#result').replaceWith(text);
на $('#result').append(text);
Основная идея - сохранить место, которое вы поместили, и добавить данные вашего сервера. Надеюсь это поможет!
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.