Блог

Объяснение:

У меня есть ASP.NET приложение, в котором я могу получить информацию об автомобиле одним нажатием кнопки. Затем сведения о транспортном средстве отображаются на модальном экране со следующими данными: ИДЕНТИФИКАТОР, ИМЯ ТРАНСПОРТНОГО СРЕДСТВА,ГОД и ДОКУМЕНТАЦИЯ VEHICLE_DOCUMENTATION.

Документация VEHICLE_DOCUMENTATION отображается в тегах привязки, которые создаются с помощью JavaScript. Ожидается, что когда я получу сведения о транспортном средстве, их соответствующая документация VEHICLE_DOCUMENTATION будет отображена и создана в теге привязки. Если будет получена другая информация о транспортном средстве, их соответствующая документация VEHICLE_DOCUMENTATION также будет создана в теге привязки.

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

Я предоставил полный рабочий код ниже, включая сообщение об ошибке, с которым я сталкиваюсь. Надеюсь, кто-нибудь сможет мне помочь.

Детальный контроллер:

 DetailController:

[HttpPost]
public ActionResult GetDetail(int? id)
{
  return _context.Vehicle.Where(v => v.ID == id).Select(x => new VehicleModel(){
     ID = x.ID,
     VEHICLENAME = x.VEHICLENAME,
     YEAR = x.YEAR,
     VEHICLE_DOCUMENTATION = x.VEHICLE_DOCUMENTATION
  }).FirstOrDefault();
}
 

Подробная страница Бритвы:

 Button
------
<button type="button" data-toggle="modal" data-target="#detailModal" onclick="postData(id)"></button>

Modal window appears when button is clicked
-------------------------------------------
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalTitle">Vehicle Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
            </div>
            <div class="modal-body">
                ID: <label id="ID"></label><br />
                VEHICLE NAME: <label id="VEHICLENAME"></label><br />
                YEAR: <label id="YEAR"></label><br />
                VEHICLE DOCUMENTATION: <label id="VEHICLE_DOCUMENTATION"></label><br />
            </div>
        </div>
    </div>
</div>

AJAX POST to GetDetail method:
------------------------------
<script>
function postData(id) {
   response = '';
            $.ajax({
                async: true,
                type: "POST",
                url: "/Detail/GetDetail",
                data: { 'id': id},
                success: function (xhr) {
                    response = xhr;
                    $('#ID').text(response.data.ID);
                    $('#VEHICLENAME').text(response.data.VEHICLENAME);
                    $('#YEAR').text(response.data.YEAR);
                    $('#VEHICLE_DOCUMENTATION').text(response.data.VEHICLE_DOCUMENTATION);

                    //Create anchor tags
                    if (response.data.VEHICLE_DOCUMENTATION.length !== 0) {
                        for (const doc of response.data.VEHICLE_DOCUMENTATION) {
                            const anchor = document.createElement('a');
                            const list = document.getElementById('VEHICLE_DOCUMENTATION');
                            const li = document.createElement('ol');
                            anchor.href = 'www.vehicledocumentationexample.com';
                            anchor.innerText = `${doc}`;
                            
                            //THIS IS WHERE THE ERROR IS BEING FLAGGED:
                            li.appendChild(anchor);
                            list.appendChild(li);
                        }
                   //Delete/Remove elements
                    } else if (response.data.VEHICLE_DOCUMENTATION.length == 0) {
                        response.data.VEHICLE_DOCUMENTATION = [];
                        document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";
            
                       //WHAT I'VE TRIED:
                       //document.getElementById('VEHICLE_DOCUMENTATION').remove();
                       //document.getElementById('VEHICLE_DOCUMENTATION').outerHTML = "";
                    }
                },
                error: function (xhr) {
                    response = xhr;
                }
            })

}
</script>
 

Сообщение об ошибке браузера:

 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.success (...)
    at fire (jquery.js:3240)
    at Object.fireWith [as resolveWith] (jquery.js:3370)
    at done (jquery.js:9061)
    at XMLHttpRequest.<anonymous> (jquery.js:9303)
 

когда вы ставите:

  document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";
 

То, что вы делаете, — это стираете элемент метки, поэтому, когда вы вызываете его из

 const list = document.getElementById('VEHICLE_DOCUMENTATION');
 

Он вернет значение null, так как элемент больше не существует

Вместо использования «outerHTML» вы должны использовать «innerHTML», вот в чем разница между ними:

 console.log(document.getElementById("VEHICLE_DOCUMENTATION").outerHTML);

console.log(document.getElementById("VEHICLE_DOCUMENTATION").innerHTML); 

 <label id="VEHICLE_DOCUMENTATION">
  <p>something</p>
</label>