Rank 1
This issue highly critical and important. Please provide the solution immediately. Jquery conflict with kendo script.
My mvc layout.cshtml code
-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@*@Scripts.Render("~/bundles/jquery")*@
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Kendo view code
-------------------------------
@{
ViewBag.Title = "KendoTabstrip";
}
<html>
<head>
<title></title>
<link href="~/Content/Kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/Kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-header">
<div id="tabstrip">
<ul>
<li class="k-state-active">
Paris
</li>
<li>
New York
</li>
<li>
London
</li>
<li>
Moscow
</li>
</ul>
<div>
<span class="rainy"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy"> </span>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
</div>
</div>
</div>
<style>
.sunny, .cloudy, .rainy {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
}
.cloudy {
background-position: -128px 0;
}
.rainy {
background-position: -256px 0;
}
.weather {
margin: 0 auto 30px;
text-align: center;
}
#tabstrip h2 {
font-weight: lighter;
font-size: 5em;
line-height: 1;
padding: 0 0 0 30px;
margin: 0;
}
#tabstrip h2 span {
background: none;
padding-left: 5px;
font-size: .3em;
vertical-align: top;
}
#tabstrip p {
margin: 0;
padding: 0;
}
</style>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});
</script>
</div>
</body>
</html>
Finally am getting this error "Uncaught TypeError: $(...).kendoTabStrip is not a function". Kindly provide the solution immediately. This is highly important and critical. Since whenver use with asp.net mvc we are getting this error. Please help me out.
1 Answer, 1 is accepted
Hello Palanisamy,
The observed error can occur due to the following reasons:
- the Kendo UI scripts are missing or cannot be loaded
- jQuery is included after the Kendo UI scripts
Please refer to the Troubleshooting documentation articles below for more information.
http://docs.telerik.com/kendo-ui/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined
http://docs.telerik.com/kendo-ui/aspnet-mvc/troubleshooting#troubleshooting
Let me know if the above information helps.
Regards,Plamen Lazarov
Telerik