error in refreshing element which contains ajax results in the unseen pages

Question

so basically what i do is , while user is in the first page i try to get and put content to other pages , i need to call refresh on the element so i don't lose css but i keep getting errors in this part . it's always the page which user is not in that gives me the error

html

    <div class="wrapper">
      <ul  data-role="listview" class="news_list"></ul> </div>
   </div>

calling function

$(document).ready(function(e) {
        get_latest_news( 1 , 'http://www.xxx.com' , 0 );
    })

main function

function get_latest_news(id , link_ , refresh_ ){


        var w = $('#'+id).find('.wrapper');
        w.hide();
        w.find('.news_list').html('');
       jQuery.support.cors = true;
        $.ajax({
            url :  link_ ,  
            success:function(data){
                var ul ='' ;
                  $.each( data.posts , function ( k , v ){
                        ul += '<li><h3><a href="#each_news">'
                        +v.title+'</a></h3>'+
                        '<p > '+v.date+' </p></li>';
                    });
                    w.find('.news_list').append(ul);
                    w.find('.news_list').listview('refresh');
                    w.show();
            } 

        })

    }

i get

Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

in this line

w.find('.news_list').listview('refresh');

i change it to

 w.find('.news_list')listview().listview('refresh');

now i get

TypeError: parentPage[0] is undefined
[Break On This Error]   

parentId = parentUrl || parentPage[ 0 ][ $.expando ],

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Your main problem is document ready, it can't be used to initialize jQuery Mobile code. It will trigger before jQuery Mobile can load pages into the DOM. That's why jQuery Mobile has its own way of initializing content, and it is called page events:

Lets say you have a page with an id index, you would initialize it like this:

$(document).on('pagebeforeshow', '#index', function(){       
    //Call your ajax here
});

To find more about jQuery Mobile page events, and how they work take a look at my ARTICLE or find it HERE.

Your code should look like this in case you have a page with an id index:

$(document).on('pagebeforeshow', '#index', function(){
    get_latest_news( 1 , 'http://www.xxx.com' , 0 );
});

pagebeforeshow is an event you want to use here because it will trigger before page is about to be shown, so there's enough time to trigger AJAX call and populate listview before page is shown.

Other page events can be found HERE.

error in refreshing element which contains ajax results in the unseen pages

1 Answers1