This is a migrated thread and some comments may be shown as answers.

Jquery problem

1 Answer 114 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

David asked on 29 Aug 2013, 12:27 PM

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,

<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>

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

@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>

<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>

I am getting error for sticky note saying

Uncaught TypeError: Object [object Object] has no method 'stickyNotes'

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?

Jquery problem

1 Answer, 1 is accepted