JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="initialView"
data-role="view">
<h1>initialView</h1>
<a href="#ajaxView" data-role="button">go to ajaxView<br>(view with ajax call)</a>
</div>
<div id="errorView"
data-role="view">
<h1>errorView</h1>
</div>
<div id="ajaxView"
data-role="view"
data-before-show="ajaxViewBeforeShow">
<h1>ajaxView</h1>
view with ajax call
</div>
JavaScript
function navigateToErrorView() {
alert("in error callback - click to nav to errorView");
kendoApp.navigate("#errorView");
}
function doSomething(errorCallback) {
alert("about to make ajax call that will fail\nthe error callback should send us to errorView");
$.ajax({
type: "GET",
url: "/bad/url/to/trigger/error/callback",
dataType: "json",
error: errorCallback
});
}
function ajaxViewBeforeShow() {
doSomething(navigateToErrorView);
}
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"
});