AJAX успешно не отображается должным образом со второго запроса

Question

Я использую 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, но ни один из них не работает.

Почему только ошибка после первого запроса? Как я могу это исправить? Спасибо

Answer 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 id.

Я предлагаю (как грубое и быстрое решение):

При каждом запросе удаляйте все дочерние элементы вашего элемента #result и снова заполняйте его новыми данными. Поэтому добавьте эту строку перед выполнением запроса - $('#result').empty(); и замените $('#result').replaceWith(text); на $('#result').append(text);

Основная идея заключается в том, чтобы сохранить место, куда вы добавили данные своего сервера. Надеюсь, это поможет!