Trouble with jquery.steps

Question

I'm working with jquery.steps plugin, but when I open the page in browser, I get the message 'TypeError: $(...).steps is not a function'. Here is my example code (I'm using Laravel):

{!! HTML::script(asset("/js/wizard.js")) !!} {{-- wizard.js contains jquery.min.js and jquery.steps.min.js, generated via gulp --}}
<div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>

    <h1>Second Step</h1>
    <div>Second Content</div>
</div>

<script>
    var wizard = $("#wizard").steps();
    wizard.steps("add", {
            title: "HTML code",
            content: "<strong>HTML code</strong>"
    });
</script>

Am I missing something basic, or this is not working as expected. Any suggestion is appreciated.

Thanks in advance

Is jQuery imported properly before any scripts that depend on it? — haakym, Aug 24 '15 at 11:22
Yes, of course. I found the root of the problem, but not the solution. In Laravel, my 'steps' view extends the main view. Now, in the main view, I have jquery import, and I reffer to jquery once more in my 'steps'. The 'jquery.steps' plugin works well when the first import of jquery is removed, but then the other things depending on jquery fail. Generally, the workaround is proper script imports. — icemanblas, Aug 24 '15 at 11:39

score 1 · Answer 1 · answered Jun 04 '18 at 12:52

Make sure you do not import jquery twice. If you downloaded your jquery.steps library via a package manager, it might have downloaded jquery library as a dependency of jquery.steps so that causes a conflict with your already imported jquery file. You can also try to use a standalone version of jquery.steps.

Trouble with jquery.steps

1 Answers1