I have 4 tab-strips(4 views). I need to get json, when one of the tabs is activated. I already have json function but i dont understand how to bind function to the selected tab,
Now i just have:
$("#button").click(function() {
$.ajax({
...
here getting json
...})})
Thank you for answer.
7 Answers, 1 is accepted
You can use the Kendo Mobile "data-show" attribute and some templates. Here is a small sample that illustrates using Kendo "data-show" and templating:
HTML:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
meta
charset
=
"utf-8"
/>
<
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/hello-world.js"
></
script
>
<
link
href
=
"kendo/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/main.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
script
type
=
"text/x-kendo-template"
id
=
"stackStatsTemplate"
>
<
div
>Answers per minute #= answers_per_minute#</
div
>
<
div
>Questions per minute #= questions_per_minute#</
div
>
<
div
>Total number of votes is #= total_votes#</
div
>
</
script
>
<
div
data-role
=
"view"
id
=
"tabstrip-home"
data-title
=
"Hello World!"
>
<
h1
>Welcome!</
h1
>
<
p
>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</
p
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-ajax"
data-title
=
"UI Interaction"
data-show
=
"showAjaxView"
>
<
ul
id
=
"stackStats"
data-role
=
"listview"
data-style
=
"inset"
></
ul
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"mobile-tabstrip"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#tabstrip-home"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#tabstrip-ajax"
data-icon
=
"share"
>Ajax</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</
script
>
</
body
>
</
html
>
JavaScript:
// JavaScript Document
// Wait for PhoneGap to load
document.addEventListener(
"deviceready"
, onDeviceReady,
false
);
// PhoneGap is ready
function
onDeviceReady() {
}
//=======================Ajax View=======================//
function
showAjaxView() {
getAjax();
}
function
getAjax(){
$.ajax({
type:
"GET"
,
}).done(
function
( data ) {
updateStackStatListView(data);
});
}
function
updateStackStatListView( data ) {
$(
"#stackStats"
).kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: data.items}),
template: $(
"#stackStatsTemplate"
).html()
});
}
Regards,
kdimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
ListView style with js don't working.
Where i need to past listview:
<div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">
<ul id="listv" data-role="listview" data-style="inset" data-type="group">
</ul> </div>
Function to read and paste data:
function showNews() {
$.ajax({
url: 'http://apps.liftsite.ru/rgsu/index.php?tag=timetab&idgroup=1',
dataType: 'json',
cache: false,
type: 'GET',
success: function(data) {
var txt = "";
if (typeof data != "undefined") {
txt += "";
for (var i = 0; i < data.length; i++ ){
txt += "<li>" +data[i].wdname + "<ul><li data-icon=globe><a>"+ data[i].dtime +"<br />"
+ data[i].dfulln + "<br />" + data[i].clname + "</a></li></ul></li>" ;
}
}
$('#listv').html(txt);
},
error: function(data) {
$('#simpleBlock p').html("Произошла ошибка при получении JSON!");
}
});
}
In result i have a simple list without style. What is wrong?
Kendo Mobile evaluates the html, when it is first loaded, to apply its style and to perform the operations specified by the "data" attributes. To achieve what you want you need to use Kendo templates. You can read more about that here.
Once you create your template and DataSource, you just init the list-view.
When the ajax call is made and the new data is received and set to the DataSource, the list-view will automatically apply the change and template over new data.
Here is the example code:
HTML:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
meta
charset
=
"utf-8"
/>
<
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/hello-world.js"
></
script
>
<
link
href
=
"kendo/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/main.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
script
type
=
"text/x-kendo-template"
id
=
"stackStatsTemplate"
>
<
div
>Answers per minute #= answers_per_minute#</
div
>
<
div
>Questions per minute #= questions_per_minute#</
div
>
<
div
>Total number of votes is #= total_votes#</
div
>
</
script
>
<
div
data-role
=
"view"
id
=
"tabstrip-home"
data-title
=
"Hello World!"
>
<
h1
>Welcome!</
h1
>
<
p
>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</
p
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-ajax"
data-title
=
"UI Interaction"
data-show
=
"showAjaxView"
>
<
ul
id
=
"stackStats"
data-role
=
"listview"
data-style
=
"inset"
></
ul
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"mobile-tabstrip"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#tabstrip-home"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#tabstrip-ajax"
data-icon
=
"share"
>Ajax</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</
script
>
</
body
>
</
html
>
JavaScript:
// Wait for PhoneGap to load
document.addEventListener(
"deviceready"
, onDeviceReady,
false
);
var
stackDataSource =
new
kendo.data.DataSource();
// PhoneGap is ready
function
onDeviceReady() {
$(
"#stackStats"
).kendoMobileListView({
dataSource: stackDataSource,
template: $(
"#stackStatsTemplate"
).html()
});
}
//=======================Ajax View=======================//
function
showAjaxView() {
$.ajax({
type:
"GET"
,
})
.done(
function
( data ) {
stackDataSource.data(data.items);
});
}
Greetings,
kdimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
...
<body>
<script type="text/x-kendo-template" id="snTemplate" >
<li>#= wdname#
<ul><li>#= dtime#<br />
#= dfulln#<br />
#= clname#
</li></ul>
</li>
</script>
<div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">
<ul id="listv" data-role="listview" data-style="inset" data-type="group"></ul>
</div>
...
...
function onDeviceReady() {
$("#listv").kendoMobileListView({
dataSource: snDataSource,
template: $("#snTemplate").html()
});
}
...
You can have a look at the demo here for a grouped listview. If thats not the case try setting the data-role of the inner-list in your template and remove the first "li" that wraps the whole thing like so:
<
script
type
=
"text/x-kendo-template"
id
=
"snTemplate"
>
#= wdname#
<
ul data-role="listview" data-style="inset"
><
li
>#= dtime#<
br
/>
#= dfulln#<
br
/>
#= clname#
</
li
></
ul
>
</
script
>
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
and I'm going to use it for the back button.
I'd like my script to determine which tab is active.