Hi guys
I am on step 2 of the grocery list tutorial.
I added the following code(bold text) and ran the app in the ios emulator. The emulator, runs but the grocery list does not load. All I see is the loader icon.
Also how do I see runtime errors?
function initialize() {
var app = new kendo.mobile.Application(document.body, {
skin: "flat",
transition: "slide"
});
$("#grocery-list").kendoMobileListView({
dataSource: groceryDataSource,
template: "#: Name #"
});
navigator.splashscreen.hide();
}
7 Answers, 1 is accepted
The code fragment is correct and it should work properly however I believe that the API key might not be setup correctly. Could you check line 2 in app.js and look for var apiKey = ... . If the apiKey has a value of 'YOUR API KEY' then you should change it and set your Backend Services API key. To do so please follow these steps:
- Find and click the “Data” link on the right-hand side of the screen.
- In the Data Navigator (the panel on the right-hand side of the screen), expand “Backend Services”, and then right click on “Grocery List Backend” (or whatever you named your Backend Services project). Select “Properties” from the context menu.
- In the Properties menu (bottom right-hand side of the screen), find the project's API key and copy it.
- Click the “Solution” link on the right-hand side of the screen to switch back to this project's files h.
- Open app.js in the scripts folder.
- Replace the 'YOUR API KEY' string with your project's API key that you copied to the clipboard.
Also could you check if you have inserted groceries to your database - this is another scenario when the loading indicator could appear without displaying items. If this is indeed the case, then you should check the BackendServices project settings. Go to your project workspace and choose the project (in the tutorial it is named 'Grocery List Backend'). Then in the left-side pane chose the Data option and in the drop down select Types - that's where you can check if the database is actually populated. In case there are no entries perform these steps to add new entries:
- Click the blue “Create a Content Type” button.
- Type “Groceries” in the “Type name” input box.
- Under “Add a field”, type “Name”, leave the dropdown set to “Text”, and then click the blue “Add” button.
- Click the green “Save” button.
- Click the blue “Add an item” button.
- In the right pane, enter a grocery into the text box (e.g. Bananas, Apples, and so forth), and then press the green “Save” button.
- Repeat steps the last two steps so that you have at least 5 groceries in the list.
Regards,
Toma
Telerik
I have the same problem. In fact, I paste the following code ( $("#grocery-list").kendoMobileListView({
dataSource: groceryDataSource,
template: "#: Name #"
});)
in the initialize() function (after the var app = ...; line). And all I have is the loading indicator. Can you help me ?
From your post I couldn't get if you tried the solutions suggested by Toma in the previous post. If you tried them and they didn't fix the problem, please send the tutorial project, so that we can take a look.
Regards,
Martin Yankov
Telerik
Hi guys,
I'm having some trouble on step 3 of this same tutorial, when is said to replace the groceryDataSource declaration, which is:
var
groceryDataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"https://api.everlive.com/v1/"
+ MYapiKey +
"/Groceries"
,
dataType:
"jsonp"
}
},
schema: {
data:
function
(response) {
return
response.Result;
}
}
});
To this code:
var
groceryDataSource =
new
kendo.data.DataSource({
type:
"everlive"
,
transport: {
typeName:
"Groceries"
}
});
This causes the app to keep on waiting for information, which I suspect happens because I remove the API Key from the infos.
Can you tell me the best way to proceed in this situation?
Hi Bruno,
You can examine the error by running the app in the Telerik Platform Simulator, pressing the F12 key on the keyboard and then selecting the "Console" tab.
In order the DataSource of type "everlive" to load the data from the "Groceries" content type properly, make sure you have an Everlive instance, initialized prior to the groceryDataSource variable.
You can read more about the Everlive instance here and about using “everlive” data source here.
The completed code for step 3 in app.js should look like this (use your actual App ID):
(
function
() {
var
apiKey =
"XXXXXXXXXXXXX"
;
var
el =
new
Everlive(apiKey);
var
groceryDataSource =
new
kendo.data.DataSource({
type:
"everlive"
,
transport: {
typeName:
"Groceries"
}
});
function
initialize() {
var
app =
new
kendo.mobile.Application(document.body, {
skin:
"flat"
,
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();
},
close:
function
() {
$(
"#add"
).data(
"kendoMobileModalView"
).close();
this
.grocery =
""
;
}
});
document.addEventListener(
"deviceready"
, initialize);
}());
Let me know if this helps.
Regards,
Martin
Telerik
I was having the exact same issue as you were experiencing. I had gone through all of the Admin's suggested tips without success. I had finally figured out that the issue was due to the following error: "The server understood the request, but is refusing to fulfill it". I proceeded to change the URL call from a HTTPS to just HTTP. This change resolved the issue. See the final code snippet below:
var
groceryDataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"http://api.everlive.com/v1/"
+ apiKey +
"/Groceries"
,
dataType:
"jsonp"
}
},
schema: {
data:
function
(response) {
return
response.Result;
}
}
});
@Bruce
Thanks for your input and reporting your findings.
Perhaps the calls to the Everlive API over HTTPS is not included in the Telerik Platform subscription you are using hence the error?
Also, the jsonp setting as shown in the tutorial (will be reported to the tutorial contributors) is not needed, json will suffice:
var
groceryDataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"https://api.everlive.com/v1/"
+ apiKey +
"/Groceries"
,
dataType:
"json"
}
// ommitted for brevity
Regards,
Anton Dobrev
Telerik