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">×</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?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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>
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0