Jquery is not defined and $ is not define error in MVC4
Question
I apply one admin panel template in my MVC application. Then i change the view as per that template design.
This is the sample form design which is in that template. i choose Horizontal form design and apply the same design for my forms.
My Edited View
See the above image there is no correct alignment and showing all plugins which i used in the view all are failed. Because of that Jquery is not defined and $ is not define error.
My View Code
Plugin which is in header
@model Sample_Customer.Area
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | General Form Elements</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no" name="viewport">
<!-- jQuery 2.2.0 -->
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="~/Scripts/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Body Code
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div class="content-wrapper">
<section class="content-header">
<h1>
General Form Elements
<small>Preview</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Forms</a></li>
<li class="active">General Elements</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Area</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">DisplayName</label>
<div class="col-sm-10">
@Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text", id = "Date" })
@Html.ValidationMessageFor(model => model.DisplayName)
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">PrintName</label>
<div class="col-sm-10">
@Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text", id = "Date" })
@Html.ValidationMessageFor(model => model.PrintName)
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
@Html.DropDownList("CityID", null, "Select", new { @class = "form-control" })
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-default">Clear</button>
<button type="submit" class="btn btn-info pull-right">Save</button>
</div>
<!-- /.box-footer -->
</form>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.3.3
</div>
<strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
reserved.
</footer>
<div class="control-sidebar-bg"></div>
</div>
</body>
}
I saw many articles for this error. Many of them said load the java script before the bootstrap. Before i put this below j query files under footer. Then only i again put these plugins in the header. But still i got this error.
<!-- jQuery 2.2.0 -->
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="~/Scripts/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
I tried my level best to explain the issue. Please any one help me to resolve this issue.
Advance Thanks..
2 answers
solution1
0 2016-04-21 07:34:53
You should add jquery-ui reference before bootstrap references. Follow this order:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
solution2
0 2016-04-21 07:51:34
You have to import Jquery and Jquery UI before all other Js components. Before the other components may use the Jquery libraries.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.