Specific Javascript function not recognized? (ASP.NET MVC) JS/CSS/HTML

Question

I am trying to use a form wizard within my program using a template i had found off the internet at freefrontend. However the one JS function being used is not being picked up in the program. As shown by the console on chrome, i receive the following exception:

My program code is as follows (HTML / JS)

@{
    ViewBag.Title = "LoginSignUp";
    Layout = "~/Views/Shared/LoginSignUp.cshtml";
    @Scripts.Render("~/bundles/jquery")
}
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152092/smartwizard/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152091/smartwizard/smart_wizard_theme_arrows.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152197/smartwizard/jquery.smartWizard.min.js"></script>
<div class="container">
    <div class="row d-flex justify-content-center mt-200"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch multistep Wizard </button> </div> <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Smart Wizard modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body">
                    <div id="smartwizard">
                        <ul>
                            <li><a href="#step-1">Step 1<br /><small>Account Info</small></a></li>
                            <li><a href="#step-2">Step 2<br /><small>Personal Info</small></a></li>
                            <li><a href="#step-3">Step 3<br /><small>Payment Info</small></a></li>
                            <li><a href="#step-4">Step 4<br /><small>Confirm details</small></a></li>
                        </ul>
                        <div class="mt-4">
                            <div id="step-1">
                                <div class="row">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Name" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Email" required> </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Password" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Repeat password" required> </div>
                                </div>
                            </div>
                            <div id="step-2">
                                <div class="row">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Address" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="City" required> </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="State" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Country" required> </div>
                                </div>
                            </div>
                            <div id="step-3" class="">
                                <div class="row">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Number" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Holder Name" required> </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="CVV" required> </div>
                                    <div class="col-md-6"> <input type="text" class="form-control" placeholder="Mobile Number" required> </div>
                                </div>
                            </div>
                            <div id="step-4" class="">
                                <div class="row">
                                    <div class="col-md-12"> <span>Thanks For submitting your details with BBBootstrap.com. we will send you a confirmation email. We will review your details and revert back.</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {

        $('#smartwizard').smartWizard({
            selected: 0,
            theme: 'arrows',
            autoAdjustHeight: true,
            transitionEffect: 'fade',
            showStepURLhash: false,

        });

    });
</script>

CSS has been placed in a separate file and appears to be working correctly.

Any suggestions as to why this may be?

Answer 1

You just need to include the jQuery library before the other libraries.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>