Hi, I am having a problem to bind a Listview in kendo ui mobile with a server side method written in a Webservice.
But this code is not working. When i placed a debugger in method, i found that debugger does not go inside the $.ajax
and go out to end the function. Can anybody help ?
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/kendo.all.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function mobileListViewDataBindInitFlat() {
debugger;
$.ajax({
type: "POST",
url: "mobileAppWebService.asmx/GetData",
data:null,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#flat-listview").kendoMobileListView({
dataSource: data.d,
});
},
failure: function (msg) {
alert(msg);
}
});
}
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<div data-role="view" data-init="mobileListViewDataBindInitFlat" data-title="Data Bindings">
<ul data-role="listview" data-style="inset" id="flat" >
</ul>
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</body>
But this code is not working. When i placed a debugger in method, i found that debugger does not go inside the $.ajax
and go out to end the function. Can anybody help ?
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/kendo.all.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function mobileListViewDataBindInitFlat() {
debugger;
$.ajax({
type: "POST",
url: "mobileAppWebService.asmx/GetData",
data:null,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#flat-listview").kendoMobileListView({
dataSource: data.d,
});
},
failure: function (msg) {
alert(msg);
}
});
}
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<div data-role="view" data-init="mobileListViewDataBindInitFlat" data-title="Data Bindings">
<ul data-role="listview" data-style="inset" id="flat" >
</ul>
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</body>
1 Answer, 1 is accepted
0
Hello Kamran,
KendoUI is not compatible with jQuery v1.9.1, instead please use jQuery v1.8.2.
In addition, you are initializing the ListView widget inside the success event handler of the $.ajax request. Multiple initialization of the widgets is not supported. I can suggest you two alternative approaches:
Regards,
Alexander Valchev
the Telerik team
KendoUI is not compatible with jQuery v1.9.1, instead please use jQuery v1.8.2.
In addition, you are initializing the ListView widget inside the success event handler of the $.ajax request. Multiple initialization of the widgets is not supported. I can suggest you two alternative approaches:
- bind the ListView widget to a DataSource component, like in this demo. The data should be retrieved from the webservice via read transport (it will make $.ajax request)
- if you insist to use separate $.ajax request, please just replace the data of the ListView's dataSource with the data method. Do not reinitialize the widget.
success:function(data) {$("#flat-listview").data("kendoMobileListView").dataSource.data( data.d );//replace the data}
I hope this will help.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!