I am working through the Photo Album tutorial. All was working well on both the simulator and on an IOS device (iPhone 6) until I reached step 7 which saves and retrieves images from the cloud. It still works fine from the simulator but on the IOS device it shows a blank screen - any suggestions most welcome.
Code follows:-
index.html:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<script src="https://bs-static.cdn.telerik.com/1.6.9/everlive.all.min.js"></script>
<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>
</head>
<body>
<div data-role="view" data-title="My awesome Photos" data-model="listview">
<header data-role="header">
<div data-role="navbar"> <span data-role="view-title"></span> <button data-role="button" data-align="right" data-bind="click:addImage">Add</button> </div>
</header>
<ul id="images"></ul>
</div>
</body>
</html>
apps.js :-
(function () {
var everlive = new Everlive("enpv14gfv06tp33h");
document.addEventListener("deviceready", function () {
window.listview = kendo.observable({
addImage: function () {
var success = function (data) {
everlive.Files.create({
Filename: Math.random().toString(36).substring(2, 15) + ".jpg",
ContentType: "image/jpeg",
base64: data
}).then(loadPhotos,
function (err) {
alert("Could not upload image" + err.message);
});
};
var error = function () {
navigator.notification.alert("Unfortunately we could not add the image");
};
var config = {
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 400,
targetWidth: 400
};
navigator.camera.getPicture(success, error, config);
}
});
function loadPhotos() {
everlive.Files.get().then(function (data) {
var files = [];
for (var i = data.result.length - 1; i >= 0; i--) {
var image = data.result[i];
files.push(image.Uri);
}
$("#images").kendoMobileListView({
dataSource: files,
template: "<img src='#: data #'>"
});
},
function (err) {
alert("Could not fetch images: " + err.message);
});
}
var app = new kendo.mobile.Application(document.body, { skin: "nova" });
loadPhotos();
$("#images").kendoMobileListView({
dataSource: ["images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg"],
template: "<img src='#: data #'>"
});
navigator.splashscreen.hide();
});
} ());
3 Answers, 1 is accepted
The code looks good to me. However, the Everlive JS file should be included after the Cordova, jQuery and Kendo JS files. This the head section should look something like this:
<head> <title></title> <meta charset="utf-8"> <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet"> <link href="styles/main.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="https://bs-static.cdn.telerik.com/1.6.9/everlive.all.min.js"></script> <script src="scripts/app.js"></script></head>Please, let me know if this is the case. I hope this helps.
Regards,
Preslav
Telerik by Progress
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Rank 1
That worked for the photo app - thanks
I've now moved on to the Groceries app and have a similar issue. On the simulator all works fine but on the IOS device the data wont display - All I see is the header the rest of the screen is blank except for a rotating "waiting" symbol.
Code below.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
<link href="styles/main.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="https://bs-static.cdn.telerik.com/1.6.9/everlive.all.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="view" id="list" data-title="Groceries">
<div data-role="navbar"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-rel="modalview" href="#add">Add</a> </div>
<ul id="grocery-list"></ul>
</div>
<div data-role="modalview" id="add" style="width: 90%" data-model="addView">
<div data-role="header">
<div data-role="navbar"> <span>Add Grocery</span> </div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label>
Grocery:<input type="text" data-bind="value: grocery">
</label>
</li>
</ul>
<button data-bind="click: add" class="add-button" data-role="button">Add</button>
<button data-bind="click: close" class="close-button" data-role="button">Close</button>
</div>
</body>
</html>
(function () {
var apiKey = "nvajfk090d6vv70f";
var el = new Everlive(apiKey);
var groceryDataSource = new kendo.data.DataSource({
type: "everlive",
sort: { field: "name", dir: "asc" },
transport: {
typeName: "Groceries"
}
});
function initialize() {
var app = new kendo.mobile.Application(document.body, {
skin: "nova",
transition: "slide"
});
$("#grocery-list").kendoMobileListView({
dataSource: groceryDataSource,
template: "#: Name #"
});
navigator.splashscreen.hide();
}
window.addView = kendo.observable({
add: function () {
if (!this.grocery) {
navigator.notification.alert("Please provide a grocery.");
return;
}
groceryDataSource.add({ Name: this.grocery });
groceryDataSource.one("sync", this.close);
groceryDataSource.sync();
this.set("grocery", "");
},
close: function () {
$("#add").data("kendoMobileModalView").close();
}
});
document.addEventListener("deviceready", initialize);
} ());
The provided code does not work in the simulator nor on a device on my side. During my investigation, I noticed that during the loading of the data, I get an Error 403 (Forbidden). This makes me think that you have changed the Groceries permission from Public to Private and there is no user logged in once the view is loaded.
This will be resolved once you create a login view in step 5/7.
Additionally, I'd suggest checking the complete version of the tutorial. You could use it as a reference.
Regards,
Preslav
Telerik by Progress
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.