See below mobile client for an example of the following issue:
If the server is up and running and allowing anonymous access, the results display properly once app is loaded. If I click the "Load Test" button, the read function is called again. This works as I would expect.
If I stop the server or I require authorization on the server's method, I get the HTTP error (404 or 401, respectively) I expect. However, when I click the "Load Test" button after the HTTP error occurs, the read function is not called. I would expect another GET request to be sent to the server, but this is not happening. In fact, the alert in the read function is not even called.
Is this a bug or should I be doing some kind of error handling on the client side to avoid this problem?
Thanks,
Dan
****index.html****
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/sitesViewModel.js"></script>
</head>
<body style="font-size:.85em;">
<div id="siteList" data-model="sitesViewModel" data-role="view" data-layout="default" data-before-show="sitesViewModel.beforeShow">
<a data-role="button" data-bind="events: { click: onLoad }">Load Test</a>
<ul id="siteListView" data-role="listview" data-endlessscroll="true" data-bind="source: sitesSource" data-pull-to-refresh="true" data-template="siteList-template"></ul>
</div>
<script type="text/x-kendo-template" id="siteList-template">
<span id="siteListItem" hidden>#=data.SandbagSiteID#</span>
<div style="font-size:.85em;">
#: SiteName # - #: City #
</div>
</script>
</body>
</html>
****app.js****
var app = new kendo.mobile.Application($(document.body), {
initial: "siteList",
platform: "ios7"
});
var uri = 'http://localhost:55221/';
****sitesViewModel****
var sitesViewModel = kendo.observable({
sitesSource: new kendo.data.DataSource({
async: false,
autoSync: true,
transport: {
read: function (options) {
alert('read called!');
$.ajax({
dataType: 'json',
url: uri + 'api/sandbags',
success: function (data) {
options.success(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
})
},
update: function (options) {
$.ajax({
contentType: "application/json",
type: "PUT",
dataType: "json",
url: uri + 'api/sandbags/' + options.data.SandbagSiteID,
data: JSON.stringify(options.data)
})
.done(function (data) {
});
}
},
schema: {
model: {
id: "SandbagSiteID",
fields: {
SandbagSiteID: { type: "number", editable: false, nullable: false, defaultValue: 0 }
}
}
}
}),
onLoad: function (e) {
sitesViewModel.sitesSource.read();
}
});
If the server is up and running and allowing anonymous access, the results display properly once app is loaded. If I click the "Load Test" button, the read function is called again. This works as I would expect.
If I stop the server or I require authorization on the server's method, I get the HTTP error (404 or 401, respectively) I expect. However, when I click the "Load Test" button after the HTTP error occurs, the read function is not called. I would expect another GET request to be sent to the server, but this is not happening. In fact, the alert in the read function is not even called.
Is this a bug or should I be doing some kind of error handling on the client side to avoid this problem?
Thanks,
Dan
****index.html****
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/sitesViewModel.js"></script>
</head>
<body style="font-size:.85em;">
<div id="siteList" data-model="sitesViewModel" data-role="view" data-layout="default" data-before-show="sitesViewModel.beforeShow">
<a data-role="button" data-bind="events: { click: onLoad }">Load Test</a>
<ul id="siteListView" data-role="listview" data-endlessscroll="true" data-bind="source: sitesSource" data-pull-to-refresh="true" data-template="siteList-template"></ul>
</div>
<script type="text/x-kendo-template" id="siteList-template">
<span id="siteListItem" hidden>#=data.SandbagSiteID#</span>
<div style="font-size:.85em;">
#: SiteName # - #: City #
</div>
</script>
</body>
</html>
****app.js****
var app = new kendo.mobile.Application($(document.body), {
initial: "siteList",
platform: "ios7"
});
var uri = 'http://localhost:55221/';
****sitesViewModel****
var sitesViewModel = kendo.observable({
sitesSource: new kendo.data.DataSource({
async: false,
autoSync: true,
transport: {
read: function (options) {
alert('read called!');
$.ajax({
dataType: 'json',
url: uri + 'api/sandbags',
success: function (data) {
options.success(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
})
},
update: function (options) {
$.ajax({
contentType: "application/json",
type: "PUT",
dataType: "json",
url: uri + 'api/sandbags/' + options.data.SandbagSiteID,
data: JSON.stringify(options.data)
})
.done(function (data) {
});
}
},
schema: {
model: {
id: "SandbagSiteID",
fields: {
SandbagSiteID: { type: "number", editable: false, nullable: false, defaultValue: 0 }
}
}
}
}),
onLoad: function (e) {
sitesViewModel.sitesSource.read();
}
});