Hello there.
I am using kendo ui with mvc. Its all running good, but I have a problem while integrating another jquery plugin.
I have my kendo running on Scripts/kendo/2013.1.514/jquery.min.js ( I guess), but my new sticky notes plugin of jquery required higher version of library. it is not working with jquery.min.js files.
Here is my script structure.
My master page looks like,
It is running fine for all the pages. on other pages I have kendo grid and many other stuffs, I also have the kendo menu.
My problem comes when I m trying to implement jQuery Sticky Notes on a particular page. here is the code
I am getting error for sticky note saying
If I set the layout to null, the sticky notes will work fine.
I understand its all due to jquery load sequence. can any one please help me out of this?
I am using kendo ui with mvc. Its all running good, but I have a problem while integrating another jquery plugin.
I have my kendo running on Scripts/kendo/2013.1.514/jquery.min.js ( I guess), but my new sticky notes plugin of jquery required higher version of library. it is not working with jquery.min.js files.
Here is my script structure.
My master page looks like,
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>@ViewBag.Title - My ASP.NET MVC Application</
title
>
<
link
href
=
"~/favicon.ico"
rel
=
"shortcut icon"
type
=
"image/x-icon"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
link
rel
=
"stylesheet"
href
=
"~/Themes/style.css"
/>
<
script
src
=
"~/Scripts/jquery-1.7.1.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"~/Scripts/jquery-ui-1.8.20.min.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
@RenderBody()
</
body
>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.1.514/kendo.common.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.1.514/kendo.metro.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.1.514/kendo.dataviz.metro.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.1.514/jquery.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.1.514/kendo.web.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"></
script
>
@*USED FOR KENDO CHARTS*@
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js")"></
script
>
</
html
>
My problem comes when I m trying to implement jQuery Sticky Notes on a particular page. here is the code
@model List<
Sanwin.ViewModels.Collaboration.CollaborationNoteListModel
>
@using Sanwin.Web;
@using Kendo.Mvc.UI
@{
Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
// Layout = null;
}
@section left
{
@Html.Partial("~/Views/Collaboration/_CollaborationNavigation.cshtml")
}
<
link
rel
=
"stylesheet"
href
=
"@Url.Content("
~/content/jQuery-Sticky-Notes/css/jquery.stickynotes.css")"
type
=
"text/css"
>
@*<
script
src
=
"~/Scripts/jquery-1.7.1.min.js"
type
=
"text/javascript"
></
script
>*@
@*<
script
src
=
"~/Scripts/jquery-ui-1.8.20.min.js"
type
=
"text/javascript"
></
script
>*@
<
script
type
=
"text/javascript"
src
=
"@Url.Content("
~/content/jQuery-Sticky-Notes/script/jquery.stickynotes.js")"></
script
>
<
div
class
=
"product_body"
>
<
div
class
=
"account-page"
>
<
div
class
=
"page-title"
>
<
h1
style
=
"float: left"
>My Notes
</
h1
>
</
div
>
<
div
class
=
"clear"
>
</
div
>
<
div
class
=
"body"
>
<
div
class
=
"section-body"
id
=
"notes11"
style
=
"width:800px;height:600px;"
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
</
script
>
<
script
type
=
"text/javascript"
>
// wait for the DOM to be loaded
$(document).ready(function () {
var options = {
notes: [{
"id": 1,
"text": "Test Internet Explorer",
"pos_x": 50,
"pos_y": 50,
"width": 200,
"height": 200,
}]
}
// $("#noteList").stickyNotes(options);
$('#notes11').stickyNotes();
});
</
script
>
Uncaught TypeError: Object [object Object] has no method 'stickyNotes'
I understand its all due to jquery load sequence. can any one please help me out of this?