Hello
I am using a template i bought from themeforest in my mvc 5 application, everthing is working fine except whenever i want to include some external javascript files that didnt come with the template, then the javascript would not see the javascript that came with the template anymore! below is my code:
BundleConfig.cs:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/Javascript",
@"//code.jquery.com/jquery-1.10.2.js"
).Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/Javascript",
@"//code.jquery.com/ui/1.11.4/jquery-ui.js"
).Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
"~/Content/themes/base/all.css"));
bundles.Add(new ScriptBundle("~/bundles/Javascript").Include(
"~/DataTables-1.10.10/media/js/jquery.js",
"~//code.jquery.com/jquery-1.10.2.js",
"~/DataTables-1.10.10/media/js/jquery.js",
"~/DataTables-1.10.10/media/js/jquery.dataTables.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/all.css",
"~/Content/themes/base/base.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/tooltip.css"));
BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
}
_Layout.schtml:
<pre lang="HTML">
<head>
<title>Farm Management System</title>
<!--
<meta charset="utf-8" />
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="" name="description" />
<meta content="" name="author" />
<!--
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jqueryui")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/JavaScript")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
$(function() {
$(".jqueryui-marker-datepicker").datepicker({
dateFormat: "dd/mm/yy",
changeYear: true,
showOn: "button"
}).css("display", "inline-block")
.next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
});
});
</script>
@RenderSection("Scripts", required : false)
<!--
<link rel="stylesheet" href="~/assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="~/assets/fonts/style.css" type="text/css" />
<link rel="stylesheet" href="~/assets/css/main.css" type="text/css" />
<link rel="stylesheet" href="~/assets/css/main-responsive.css" type="text/css" />
<link rel="stylesheet" href="~/assets/plugins/iCheck/skins/all.css" type="text/css" />
<link rel="stylesheet" href="~/assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css" type="text/css" />
<link rel="stylesheet" href="~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css" type="text/css" />
<link rel="stylesheet" href="~/assets/css/theme_light.css" type="text/css" id="skin_color"/>
<link rel="stylesheet" href="~/assets/css/print.css" type="text/css" media="print" />
<!--
<!--
<link rel="shortcut icon" href="favicon.ico" />
<!--
<!--
<!--
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script>
<!--
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/less/less-1.5.0.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-cookie/jquery.cookie.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js")"></script>
<script type="text/javascript" src="@Url.Content("~/assets/js/main.js")"></script>
<!--
<script>
jQuery(document).ready(function () {
Main.init();
Index.init();
FormElements.init();
FormValidator.init();
UIButtons.init();
});
</script>
@RenderSection("CSS", required : false)
@RenderSection("JavaScript", required : false)
</head>
Content.cshtml:
@section JavaScript
{
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
}
@section CSS
{
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes /smoothness/jquery-ui.css">
}
Now on this page, the side menu and menu bar items from _Layout Page no longer working, please, i will appreciate if anyone could show me how to do it right. Thanks