Блог

Главная - Вопросы по программированию - Начальная загрузка 5 offcanvas ошибка: Неперехваченная ошибка типа: Не удается прочитать свойство ‘parentNode’ неопределенного

Начальная загрузка 5 offcanvas ошибка: Неперехваченная ошибка типа: Не удается прочитать свойство ‘parentNode’ неопределенного

#javascript #bootstrap-5 #bootstrap-table #off-canvas-menu

Вопрос:

Пролистывание списка для создания таблицы информации и меню offcanvas для отображения дополнительной информации при нажатии на строку таблицы <tr> . В настоящее время я получаю ошибку «Родительский код», когда нажимаю на любой . Есть идеи, почему я получаю эту ошибку?

У <tr> него есть «данные-bs-цель», указывающая на правильный «идентификатор» для Offcanvas, но по какой-то причине он не знает родительский код.

сообщение об ошибке

 <table class="table table-hover table-sm" id="t1">
  <thead class="table-secondary">
    <th scope="col" class="name">
      Host Name
    </th>
    <th scope="col" class="ip_address">
      IP Address
    </th>

         ... 

  </thead>
  <tbody class="lan-table">
    {% for host in hosts %}

      <tr class="host-row" data-view='host' data-bs-toggle="offcanvas" data-bs-target="#{{host.fqdn}}-host-details">
        <td class="host-fqdn"></td>
        <td class="host-ip-address"></td>

           ...

      </tr>
    {% endfor %}
  </tbody>
</table>

...

{% for host in hosts %}
  <div class="offcanvas offcanvas-end w-25" data-bs-scroll="true" tabindex="-1" id="{{host.fqdn}}-host-details" style="min-width: 400px;">

    ...

  </div>
{% endfor %}

Ниже приведен скриншот, на котором правильно сгенерирована страница. Примечание: Поскольку это захват информации о полном доменном имени, я заблокировал свой домен в целях безопасности.
Статический HTML

Комментарии:

1. Не могли бы вы, пожалуйста, добавить какой-нибудь код, чтобы мы могли видеть, что вы делаете?

2. Да! Извините, я добавил часть кода, чтобы придать базовую структуру.

3. Может быть, вы изменяете переменную host.fqdn? Можете ли вы проверить статическую сгенерированную страницу и проверить правильность идентификаторов? Я так не думаю, но на самом деле я не нахожу никаких ошибок в вашем html. Я предполагаю, что вы правильно импортируете как css начальной загрузки, так и js

4. Да, статическая страница создается со всеми правильными идентификаторами. И я предполагаю, что мои css и js импортируются правильно, потому что это единственный раз, когда у меня возникают проблемы с моей страницей. Я добавил скриншот, чтобы показать.

5. Единственное, что мне приходит в голову, это то, что, возможно, offcanvas не поддерживает переключение между строками таблицы… может быть? Попробуйте изменить его на список, но я немного запутался в этом.

Ответ №1:

Я узнал, почему мой оффканвас не работал. В моих идентификаторах «data-bs-target» были символы периода, и javascript для offcanvas использует querySelector, для работы которого требуется экранирование специальных символов.

Вот ссылка с упоминанием об этом. Документ.Селектор запросов()

Метки: