Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' из неопределенного в Object.onLoad - PullRequest
Новая
       40

Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' из неопределенного в Object.onLoad

0 голосов
/ 24 июня 2018

Есть идеи, что может быть причиной этой ошибки?

Список моих включает: 

<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

Элемент HTML: 

<div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
    <i class="calendar icon"></i>
    <span class="text">Choose a Month</span>
    <div class="menu">
                <div class="item">January</div>
                <div class="item">February</div>
                <div class="item">March</div>
                <div class="item">April</div>
                <div class="item">May</div>
                <div class="item">June</div>
                <div class="item">July</div>
                <div class="item">August</div>
                <div class="item">September</div>
                <div class="item">October</div>
                <div class="item">November</div>
                <div class="item">December</div>
    </div>
</div>

Сценарий: 

$('#monthDrop').dropdown();

Рендерит нормально и всё и без ошибок при загрузке, вот только когда я пытаюсь нажать на него:

enter image description here

Ответы [ 4 ]

0 голосов
/ 04 мая 2019

Удаление data-toggle = "dropdown" не сработало для меня, так как Bootstrap 4.x требует этого для выпадающих меню.

Однако в аналогичной проблеме я обнаружил, что у стороннего плагина, который я использовал, была удаленная функция с именем removeAttr. Когда я поменял его на опору, я работал. Больше ошибок нет.

0 голосов
/ 03 августа 2018

Мы столкнулись с той же ошибкой со следующим html: 

<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
    <option disabled value="">Please select one</option>
    <option class="dropdown-item" value="type1">Carrier</option>
    <option class="dropdown-item" value="type2">Shipper</option>
</select>

Мы попытались удалить data-toggle="dropdown" из тега <select>;ошибка больше не возникала, а раскрывающееся меню по-прежнему функционировало.Не уверен, , почему это работает, но это избавило нас от ошибки.Должен ли быть конфликт как-то?В любом случае, если кто-то ищет решение, этот обходной путь может помочь им.

0 голосов
/ 23 ноября 2018

Сохранить ссылку на semanticUI под начальной загрузкой 

<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
0 голосов
/ 24 июня 2018

CSS Framework

Прежде всего вы должны выбрать, используете ли вы Bootstrap 4 или Semantic-UI, потому что это две разные CSS-фреймворки, и использование их обоих - беспорядок.

Bootstrap 4

Предполагая, что вы выбираете Bootstrap 4, поскольку его проще и легче изучать, особенно для начинающих (но, конечно, вы можете выбрать Semantic-UI, Foundation или любой другой, если хотите), у вас должны быть эти два скрипта внутри кода: jQuery и Popper.js .

Из Документация по начальной загрузке :

Многие из наших компонентов требуют использования JavaScript для работы. В частности, они требуют jQuery, Popper.js и наших собственных плагинов JavaScript.

Dropdown

Опять же, как вы можете найти в документах:

Dropdowns построены на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение области просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js. Popper.js не используется для позиционирования выпадающих меню на панелях навигации, хотя динамическое позиционирование не требуется.

Когда вы решите, какой CSS Framework вы хотите использовать, вы сможете правильно настроить Dropdowns. Просто чтобы иметь лучшую точку зрения, вам также следует изучить документацию Semantic-UI о Dropdown.

Среда NodeJS! = Среда JavaScript браузера

Как я вижу, вы устанавливаете свои скрипты через npm, но теперь я уверен, что он предназначен для вас. Сокращенно:

npm - менеджер пакетов для пакетов Node.js

Я предполагаю, что вы пытаетесь сделать простые версии этих пакетов просто в ваших локальных папках, таких как ./project_name/javascript/bootstrap.js или ./project_name/css/bootstrap.min.css, и вам сейчас не нужно иметь node_modules. Но, опять же, конечно, вы можете иметь это так, если хотите.

Вы можете найти много полезных комментариев о Node и JavaScript здесь .

...