Fullcalendar не является функцией при использовании в Laravel
Я пытаюсь использовать fullcalendar в своем приложении laravel.
Скрипты в исходном коде веб-страницы
<script src = "http://127.0.0.1:8000/js/vendors/moment.js"></script>
<script src = "http://127.0.0.1:8000/js/vendors/jquery.min.js"></script>
<script src = "http://127.0.0.1:8000/js/vendors/fullcalendar.min.js"></script>
<script src = "http://127.0.0.1:8000/js/script.js"></script>
</body>
</html>
Код в script.js
$(function() {
$('#calendar').fullCalendar({
editable: true,
eventLimit: true,
});
});
У меня есть #calendar div на моей странице, и моя консоль показывает ошибку
Uncaught TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (script.js:2)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
(anonymous) @ script.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
w.readyException @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2
Мой файл лезвия
<div class = "container">
<div class = "row justify-content-center">
<div class = "col-md-4">
<div class = "card">
<div class = "card-header">Menu</div>
<div class = "card-body">
<ul class = "nav flex-column">
<li class = "nav-item">
<a class = "nav-link" href = "{{ route('calendar') }}">Calendar</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "col-md-8">
<div class = "card">
<div class = "card-header">Dashboard</div>
<div class = "card-body full-calendar">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
Как предложил @Leo, я попытался использовать URL-адреса https для ресурсов, которые я использую, а также использовал ngrok для создания https в localhost, но все равно получил ту же ошибку.
@Leo Я не думаю, что вам нужно удалять свой ответ, может быть, это будет решением для некоторых людей.
действительно ли вкладка сети показывает, что все js успешно загружены?
@PrafullaKumarSahu, вы просто пытались переместить скрипты в теге head?
@birdspider Я нашел актуальную проблему.
@Leo, вы правы, laravel app.js создает проблему.
дааааааааааааааааааааааааааааааа.
@ Лео, да, ты прав. я скопировал базовый html, попробовал на странице laravel и понял идею. : D
@PrafullaKumarSahu Союз - это сила;)
@ Лео Всегда. :)
@Leo check Я только что обновил свой ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я обнаружил, что проблема в Laravels app.js, которая создает ошибку, я добавлю к ней правильное решение.
Если вы будете использовать npm и webpack и управлять зависимостями, вы не получите эту ошибку. Без использования диспетчера зависимостей.
Другое решение будет использовать defer,
Вы можете использовать атрибут defer во всех других скриптах, и ошибка исчезнет.
<script src = "{{ asset('js/app.js') }}" defer></script>
<script src = "{{ asset('js/vendors/moment.js') }}" defer></script>
<script src = "{{ asset('js/vendors/fullcalendar.min.js') }}" defer></script>-->
<script src = "{{ asset('js/script.js') }}" defer></script>
Вряд ли в нативном коде Laravel есть ошибки.
@GiamPy, я так не думаю, речь идет о поддержании зависимостей.
Я постараюсь посмотреть, найду ли я другие решения, но удаляю ответ, прежде чем сообщу неверную информацию.