JQuery Mobile dynamic page with listview after ChangePage

Question

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

Answer 1

It works after changing the event listener in my first try to

$(document).on('pagebeforeshow', function(){