Hi. I am new with KendoUI and developing a mobile test app. I connect to a website whene i have a PHP page and gets the categories data from Nothwind database. I got an json as thi s:
{"Result":"OK",
"Rows":[
{"CategoryID":1,"CategoryName":"Beverages","NumProducts":12},
{"CategoryID":2,"CategoryName":"Condiments","NumProducts":12},
....
]
}
And html code is :
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$.mobile.allowCrossDomainPages = true;
refreshCategoryList();
}
// ----------------------------------------------------------
// Fill Categories List
// ----------------------------------------------------------
function refreshCategoryList() {
var url = 'http://MyServer';
$.getJSON(url, function(res) {
var result = res.Result;
if (result == 'OK') {
var categoryArray = res.Rows;
$("#categoryList").kendoMobileListView({
template : '<li><a href="#proPage" oncclik="sessionStorage.cat=${Rows.CategoryID}">${Rows.categoryName}' +
'<span class="ui-li-count">${Rows..NumProducts}</span></a></li>',
dataSource: kendo.data.DataSource.create( categoryaArray)
});
}
});
}
</script>
</head>
<body>
<ul id="categoryList"></ul>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
But i got this message in teh web console :
E/Web Console(693): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8
Any hint, please...
{"Result":"OK",
"Rows":[
{"CategoryID":1,"CategoryName":"Beverages","NumProducts":12},
{"CategoryID":2,"CategoryName":"Condiments","NumProducts":12},
....
]
}
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$.mobile.allowCrossDomainPages = true;
refreshCategoryList();
}
// ----------------------------------------------------------
// Fill Categories List
// ----------------------------------------------------------
function refreshCategoryList() {
var url = 'http://MyServer';
$.getJSON(url, function(res) {
var result = res.Result;
if (result == 'OK') {
var categoryArray = res.Rows;
$("#categoryList").kendoMobileListView({
template : '<li><a href="#proPage" oncclik="sessionStorage.cat=${Rows.CategoryID}">${Rows.categoryName}' +
'<span class="ui-li-count">${Rows..NumProducts}</span></a></li>',
dataSource: kendo.data.DataSource.create( categoryaArray)
});
}
});
}
</script>
</head>
<body>
<ul id="categoryList"></ul>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
But i got this message in teh web console :
E/Web Console(693): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8
Any hint, please...
3 Answers, 1 is accepted
0
Rajinder
Top achievements
Rank 1
Rank 1
answered on 20 Jun 2012, 12:07 PM
<div data-role="view" id="login" >
<!--<div data-role="header"><h2 style="text-align: center">Log In</h2> </div>
<div data-role="footer"><h2 style="text-align: center">Log In</h2> </div>-->
<ul data-role="listview" id="lst" data-style="inset" data-show="showDetailsView" style="border:2px solid gray" >
<li>
<div class="head"> </div>
</li>
<li>
<input type="text" style="width: 60%" id="usernameinput" placeholder="User Name" required />
<label for="usernameinput">User Name</label> </li>
<li>
<input type="password" style="width: 60%" id="passwordinput" placeholder="Password" required />
<label for="passwordinput">Password</label> </li>
<li>
<a id="btnlogin" data-role="button" onclick="checkAuthentication();">Log In</a>
</li>
</ul>
</div>
<script type="text/x-kendo-template" id="customCategoriesTemplate">
<a data-role="button" id=${GroupCode} data-icon="select" onclick="javaScript:GetProduct(this);" style="font-size:10px" >${GroupName}</a>
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------------
function checkAuthentication() {
var uName = $("#usernameinput").val()
var pass = $("#passwordinput").val()
if (uName == "" && pass == "") {
return false;
}
localStorage.setItem("username", uName)
localStorage.setItem("password", pass)
$.ajax({
type: "Post",
url: "http://localhost:2223/Services/b2bService.asmx/checkAuthentication",
contentType: "application/json; charset=utf-8",
dataType: "Json",
data: '{ userName:"' + uName + '", password:"' + pass + '" }',
async: false,
success: function (data) {
if (data.d) {
window.location = "subcategories.htm"
}
else {
alert("Info:Invalid Authentication");
}
},
complete: function (data) {
},
error: function (result) {
alert(result.status + ' ' + result.statusText);
}
});
}
------------------------------------------------------------------------------------------------------------------------------------------------------------
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Function checkAuthentication(ByVal userName As String, ByVal password As String) As Boolean
If userName.Equals("1") AndAlso password.Equals("1") Then
Return True
Else
Return False
End If
End Function
-------------------------------------------------
Try like this
<!--<div data-role="header"><h2 style="text-align: center">Log In</h2> </div>
<div data-role="footer"><h2 style="text-align: center">Log In</h2> </div>-->
<ul data-role="listview" id="lst" data-style="inset" data-show="showDetailsView" style="border:2px solid gray" >
<li>
<div class="head"> </div>
</li>
<li>
<input type="text" style="width: 60%" id="usernameinput" placeholder="User Name" required />
<label for="usernameinput">User Name</label> </li>
<li>
<input type="password" style="width: 60%" id="passwordinput" placeholder="Password" required />
<label for="passwordinput">Password</label> </li>
<li>
<a id="btnlogin" data-role="button" onclick="checkAuthentication();">Log In</a>
</li>
</ul>
</div>
<script type="text/x-kendo-template" id="customCategoriesTemplate">
<a data-role="button" id=${GroupCode} data-icon="select" onclick="javaScript:GetProduct(this);" style="font-size:10px" >${GroupName}</a>
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------------
function checkAuthentication() {
var uName = $("#usernameinput").val()
var pass = $("#passwordinput").val()
if (uName == "" && pass == "") {
return false;
}
localStorage.setItem("username", uName)
localStorage.setItem("password", pass)
$.ajax({
type: "Post",
url: "http://localhost:2223/Services/b2bService.asmx/checkAuthentication",
contentType: "application/json; charset=utf-8",
dataType: "Json",
data: '{ userName:"' + uName + '", password:"' + pass + '" }',
async: false,
success: function (data) {
if (data.d) {
window.location = "subcategories.htm"
}
else {
alert("Info:Invalid Authentication");
}
},
complete: function (data) {
},
error: function (result) {
alert(result.status + ' ' + result.statusText);
}
});
}
------------------------------------------------------------------------------------------------------------------------------------------------------------
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Function checkAuthentication(ByVal userName As String, ByVal password As String) As Boolean
If userName.Equals("1") AndAlso password.Equals("1") Then
Return True
Else
Return False
End If
End Function
-------------------------------------------------
Try like this
0
Yamil
Top achievements
Rank 1
Rank 1
answered on 20 Jun 2012, 04:12 PM
Thanks Rajinder but I don't understand your code. It looks like I can not use $.getJSON ?
I shrink-ed the code to only call the json and got the same error message :
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$.mobile.allowCrossDomainPages = true;
refreshCategoryList();
}
function refreshCategoryList() {
var url = 'http://MyServer/ns/ns.php?cat=0';
$.getJSON(url, function(res) {
var result = res.Result;
alert(result);
});
}
</script>
And I got
E/Web Console(718): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8
I shrink-ed the code to only call the json and got the same error message :
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$.mobile.allowCrossDomainPages = true;
refreshCategoryList();
}
function refreshCategoryList() {
var url = 'http://MyServer/ns/ns.php?cat=0';
$.getJSON(url, function(res) {
var result = res.Result;
alert(result);
});
}
</script>
And I got
E/Web Console(718): TypeError: Result of expression 'd' [undefined] is not an object. at file:///android_asset/www/js/kendo.mobile.min.js:8
0
Yamil
Top achievements
Rank 1
Rank 1
answered on 20 Jun 2012, 09:04 PM
I changed my code to
...
<script>
function initListView() {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://MyServer/ns/ns.php?cat=0",
dataType: "json"
}
}//,
//change: function() {
// debugger;
//}
});
$("#categoryList").kendoMobileListView({
dataSource: ds,
template: "<li>#:CategoryName#</li>"
});
}
</script>
</head>
<body>
<div data-role="view" data-init="initListView">
<ul id="categoryList"></ul>
</div>
...
No error message but the listView is not shown...!!!
...
<script>
function initListView() {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://MyServer/ns/ns.php?cat=0",
dataType: "json"
}
}//,
//change: function() {
// debugger;
//}
});
$("#categoryList").kendoMobileListView({
dataSource: ds,
template: "<li>#:CategoryName#</li>"
});
}
</script>
</head>
<body>
<div data-role="view" data-init="initListView">
<ul id="categoryList"></ul>
</div>
...
No error message but the listView is not shown...!!!