i have a listview in an ajax. i want to add data-transition to this link. i tried to add
data-transition="slide"
in the code. but there's nothing change. but i tried to used this code in normal in html, the data-transition works but not with page that have ajax there. same goes when i tried
$.mobile.defaultPageTransition = "flip";
page with no ajax works well but not for page with ajax. example of my ajax is
<script type="text/javascript">
$('#MregisteredClasses').on('pageinit', function(){
var rowInput = "1";
var pageInput = "1";
$.ajax({
url: '${pageContext.request.contextPath}/getRegisteredClassesData.html',
data: ( {rows : rowInput , page : pageInput}),
type: 'POST',
success: function(json_results){
$('#list').append('<ul data-role="listview" data-inset="true" data-split-icon="gear" data-transition="slide"</ul>');
listItems = $('#list').find('ul');
$.each(json_results.rows, function(key) {
html = "<li <h3><a href='${pageContext.request.contextPath}/MRegisteredClassesDetail.phone?courseId="
+ [json_results.rows[key].courseId] + "®No=" + [json_results.rows[key].regNo] +
"' data-transition='slide' rel='external'>" + json_results.rows[key].courseName+ "</a></h3>"
+ "<a href='${pageContext.request.contextPath}/MRateCourse.phone?courseId="
+ [json_results.rows[key].courseId] + "®No=" + [json_results.rows[key].regNo] +
"' data-transition='slide' rel='external'>RATE THIS COURSE</a>" ;
listItems.append(html);
});
$('#list ul').listview();
},
});
});
</script>
anyone knows how to solve this?
i know why it does not come out, we can't use data-transition and data-ajax/rel=external together as data-ajax/rel=external load the full page again so transition is not possible..