Итак, я увидел действительно красивые формы в своем шаблоне начальной загрузки и захотел использовать их в своем проекте.
Я разместил все необходимые файлы, которые, как мне кажется, нам нужно импортировать, которые добавлены внизу кода, необходимые файлы находятся в правильных каталогах, например, шаги jquery: C:\xampp\htdocs\rps/public\files\bower_components\jquery.steps\js\jquery.steps.js
'инициализировать-steps.js':
$("#practitioner-form").steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
enablePagination: true,
autoFocus: true,
onFinished: function (event, currentIndex)
{
alert("Practitioner Added!");
}
});
Мой HTML-файл с multiform (...) пропущен:
<div class = "card-block">
<div class = "row">
<div class = "col-md-12">
<div id = "practitioner-form">
<form method = "post" id = "practitioner-form" action = "#">
<h3>Practitioner</h3>
<fieldset>
<legend>Practitioner Information</legend>
<div class = "form-group row">
<div class = "col-lg-12">
<label for = "effective_date" class = "block">{{trans('personalData.effectiveDate')}}</label>
</div>
<div class = "col-lg-12">
<input id = "effective_date" name = "effectiveDate" type = "date" class = "form-control required">
</div>
</div>
(...)
<link rel = "stylesheet" type = "text/css" href = "/files/bower_components/jquery.steps/css/jquery.steps.css">
<!-- Required Jquery -->
<script src = "/files/js/views/person/initialize-steps.js"></script>
<script src = "/files/bower_components/jquery/js/jquery.min.js"></script>
<script src = "/files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script src = "/files/bower_components/popper.js/js/popper.min.js"></script>
<script src = "/files/bower_components/bootstrap/js/bootstrap.min.js"></script>
<!--Forms - Wizard js-->
<script src = "/files/bower_components/jquery.cookie/js/jquery.cookie.js"></script>
<script src = "/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
<script src = "/files/bower_components/jquery-validation/js/jquery.validate.js"></script>
<script src = "/files/js/modules/practitionerCompetence.js"></script>
Тем не менее, когда я пытаюсь загрузить страницу, я получаю сообщение об ошибке: Uncaught TypeError: $(...).steps is not a function
Кто-нибудь знает, как это исправить?
вы сначала запускаете свой код перед загрузкой jquery и jquery.steps, это не сработает
steps
не определен, поэтому его необходимо загрузить перед вызовом $().steps
Закажите js, как этот, поместите свой скрипт в конец
<script src = "/files/bower_components/jquery/js/jquery.min.js"></script>
<script src = "/files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script src = "/files/bower_components/popper.js/js/popper.min.js"></script>
<script src = "/files/bower_components/bootstrap/js/bootstrap.min.js"></script>
<!--Forms - Wizard js-->
<script src = "/files/bower_components/jquery.cookie/js/jquery.cookie.js"></script>
<script src = "/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
<script src = "/files/bower_components/jquery-validation/js/jquery.validate.js"></script>
<script src = "/files/js/modules/practitionerCompetence.js"></script>
<script src = "/files/js/views/person/initialize-steps.js"></script>
jquery.steps.js
загружается намного позже вашего initialize-steps.js
<script src = "/files/js/views/person/initialize-steps.js"></script>
....
<script src = "/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
Вам нужно загрузить initialize-steps.js
после это
<script src = "/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
<script src = "/files/js/views/person/initialize-steps.js"></script>
....
измените порядок загрузки initialize-steps.js, поместите его в конец