I am stuck with my JQuery Mobile app trying to dynamically populate a listview of a page. I got it up and running, but found out it only worked when I directly requested the page (eg. mydomain.com/page.html) when I linked to the page from another JQM page it only worked after using the refresh button in the browser.
This is my JS code.
$(function() {
var dirs=window.location.pathname.split('/'),
current_dir =dirs[dirs.length-2];
var vars = [], hash;
var q = document.URL.split('?')[1];
if(q != undefined){
q = q.split('&');
for(var i = 0; i < q.length; i++){
hash = q[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
}
alert(current_dir);
$.getJSON("../json.php",{
section: current_dir,
id: vars['id'],
query: vars['q']
},
function(json){
if (json.mededeling) {
$("#recent").append('<li data-role="list-divider" role="heading">Mededelingen<span class="ui-li-count">'+json.mededeling.length+'</span></li>');
//loop through deals
$.each(json.mededeling,function(i,item){
$("#recent").append('<li><a href="nieuws/='+item.id+
'" data-transition="slide">'+
'<h3>'+item.title +'</h3>'+
'<p>'+item.subtitle+'</p></a></li>');
});
}
if (json.nieuws) {
$("#recent").append('<li data-role="list-divider" role="heading">Nieuws<span class="ui-li-count">'+json.nieuws.length+'</span></li>');
//loop through deals
$.each(json.nieuws,function(i,item){
$("#recent").append('<li><a href="news.html?'+item.id+
'" data-transition="slide">'+
'<h3>'+item.title +'</h3>'+
'<p>'+item.subtitle+'</p></a></li>');
});
}
if (json.onderwijs) {
$("#recent").append('<li data-role="list-divider" role="heading">Onderwijs vandaag<span class="ui-li-count">'+json.onderwijs.length+'</span></li>');
//loop through deals
$.each(json.onderwijs,function(i,item){
$("#recent").append('<li><a href="onderwijs/index.html?'+item.id+
'" data-transition="slide">'+
'<h3>'+item.title +'</h3>'+
'<p>'+item.speaker+'</p></a></li>');
});
}
$("#recent").listview('refresh');
});
});
So I guessed it had something to do with the AJAX calls of JQM.
I searched extensively but now I am really lost.
Any help putting me back on trach is highly appreciated!
Thanks
It works after changing the event listener in my first try to
$(document).on('pagebeforeshow', function(){