Testing in Chrome, using Twitter feed, I am trying to test the 'pullToRefresh' functionality but get this error in Chrome developer tools when I try to pull the list down. :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>My Open Cal</
title
>
<!-- Kendo UI Files -->
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"js/kendo.mobile.min.js"
type
=
"text/javascript"
></
script
>
<
script
>
$( //jQuery page load
function ()
{
var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" });
$("#ulMyCal").kendoMobileListView({
appendOnRefresh: true,
pullToRefresh: true,
pullTemplate: "Pull to refresh",
refreshTemplate: "Loading...",
dataSource: new kendo.data.DataSource(
{
transport:
{
read:
{
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "jsonp",
data:
{
q: "#tampa"
}
}
},
schema: {
data: "results"
}
}),
template:"<
p
>${text}</
p
>"
});
})
</
script
>
</
head
>
<
body
>
<!-- Layout for all views in the application, as specified when the app is created -->
<
div
data-role
=
"layout"
data-id
=
"layout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
>My Test</
span
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#index"
data-icon
=
"organize"
>My Calendar</
a
>
<
a
href
=
"#search"
data-icon
=
"search"
>Search</
a
>
<
a
href
=
"settings.htm"
data-icon
=
"settings"
>Settings</
a
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"view"
id
=
"index"
data-title
=
"My Calendar"
>
<
div
style
=
"text-align:center"
>
<
ul
id
=
"ulMyCal"
data-style
=
"inset"
>
</
ul
>
</
div
>
</
div
>
<
div
data-role
=
"view"
id
=
"search"
data-title
=
"Search"
>
</
div
>
</
body
>
</
html
>