Uncaught TypeError: $(...).steps не является функцией

Итак, я увидел действительно красивые формы в своем шаблоне начальной загрузки и захотел использовать их в своем проекте.

Я разместил все необходимые файлы, которые, как мне кажется, нам нужно импортировать, которые добавлены внизу кода, необходимые файлы находятся в правильных каталогах, например, шаги 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 Кто-нибудь знает, как это исправить?

измените порядок загрузки initialize-steps.js, поместите его в конец

Arshpreet Wadehra 12.06.2019 12:55

вы сначала запускаете свой код перед загрузкой jquery и jquery.steps, это не сработает

Arshpreet Wadehra 12.06.2019 12:55
steps не определен, поэтому его необходимо загрузить перед вызовом $().steps
Adelin 12.06.2019 12:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
4 347
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Закажите 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>
....

Другие вопросы по теме