1. <div data-role="page" id="quizprogram"> <div data-role="header"> <h1>www.site.com </h1> <a data-transition="slide" href="#home" data-icon="home" data-iconpos="notext">Home</a> <a href="#" data-icon="refresh" onClick="get_quizprogram_news(1);" data-theme="b" data-iconpos="notext"> </a> </div> <div data-role="header" data-theme="b"> <div class="ticker_div"> <ul class="ticker_ul"> </ul> </div> </div> <div data-role="content" id="user_list_content"> <div class="loading_pic"> <img src="images/ajax.gif" width="27" height="27" > </div> <div class="wrapper"> </div> </div> <div data-role="footer" class="footer" data-position="fixed" style="text-align:center"> <div data-role="content" > <a href="#" onClick="loadURL('http://www.site.com');" >website</a> </div> </div> </div>

i have a ajax function which adds a listview to the .wrapper .

1. $(document).on('pageshow', '#latest', function(){ 
   
        var w = $('.wrapper');
           var ul ='<ul  data-role="listview" class="news_list">' ;
             $.each( data.posts , function ( k , v ){
                   ul += '<li><h3><a href="#each_news" data-rel="dialog" onclick="get_news('+v.id+');">'
                   +v.title+'</a></h3>'+
                   '<p > '+v.date+' </p></li>';
               });
               ul += '</ul><br style="clear:both" />'
   
               w.html(ul);
   })

but the problem is footer just stays where it is , and listview goes under it . i know it's becuz footer is fixed i tired to add

1.  $('.footer').trigger('create');