A quick example on how to dynamically load a Kendo UI Mobile Collapsible from AJAX-generated content.
The code starts by AJAX request to get recent blog posts after kendo.mobile.Application is ready. Then appends post summaries to Kendo View content and instantiates kendo.mobile.ui.Collapsible widgets based on role data attribute.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<style>
h1{
text-align:center;
}
.colla-content{
clear:both;
overflow:hidden
}
.colla-content img{
max-width:50%;
display:block;
float:left;
margin:0 10px 5px 0;
}
</style>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view1" data-role="view">
<h1>Recent Posts</h1>
</div>
<script>
var app = new kendo.mobile.Application(
document.body, {
init: function(){
// ajax call on Kendo App init
$.ajax({
url:'http://www.moretechtips.net/feeds/posts/summary/'
,data:{'category':'jQuery', 'max-results': 4, 'alt':'json-in-script'}
,success:postsLoaded
,dataType:'jsonp'
});
}
});
function postsLoaded(json){
if(!json.feed.entry) return;
var vView1 = $('#view1').data("kendoMobileView");
for (var i=0, ic=json.feed.entry.length; i<ic; i++) {
var entry = json.feed.entry[i];
var thumb = entry.media$thumbnail? entry.media$thumbnail.url :'';
var colla= $('<div data-role="collapsible"></div>');
colla.append( $('<h3></h3>').text( entry.title.$t ));
colla.append( $('<div class="colla-content"></div>').html( (thumb? '<img src="'+thumb+'" />':'') + entry.summary.$t ) );
// append content to view1
vView1.content.append(colla);
// init collapsible div
kendo.init(colla, kendo.mobile.ui );
};
};
</script>
</body>
</html>
Web developer, jQuery plugin author, social media fan and Technology Blogger.
Great, exactly what I need! Thanks for sharing :)