iScroll + jQuery Mobile -> Dynamic Listview Scrolling Position Issue

Question

I have a dynamically updated listview. I've get data from my JSON service, parse and dynamically injected to div. The problem is; after generating all data, scrolling is working but not completely. Imagine that, you press and scroll the listview up, if you remove hour finger from screen, listview position automatically turn back its start position. I tried my iScroll and jQuery mobile with hard coded <ul><li> code, then it works.

Here is the code below:

     <script>
     var myScroll2;

     function loaded() {
myScroll2 = new iScroll('wrapper2');

    }

     document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
     document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded,   200); }, false);
      </script>

..

    <div id="wrapper2"> 
    <div data-role="content">   
    <div id="panoListDetay"></div>
    </div>
    </div>

---and below code was to generata data for listview.

    /*automatically upldated script*/
    /*called every 5 second*/
    <script>
    $(function update_twit(){
    $.ajax({
    url: "http://myweepage.org/service.json?q=getlast10data",
    dataType: 'jsonp',
    success: function(json_results){
        $("#notice_div").html(''); 
        $("#panoListDetay").html('');
        $('#panoListDetay').append('<ul id="tweetul" data-role="listview" data-theme="c"></ul>');
        listItems = $('#panoListDetay').find('ul');
        $.each(json_results.results, function(key) {
            html = '<h3>'+json_results.results[key].screen_name+'</h3><div class="ui-li-desc">'+json_results.results[key].text+'</div>';
            html += '<p class="ui-li-aside"><img WIDTH=12 HEIGHT=12 src="images/11-clock.png"/><strong> '+json_results.results[key].tarih.substring(11,16)+'</strong></p>';
            html +='<p class="ui-li"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
            listItems.append('<li>'+html+'</li>');
        });
        $('#panoListDetay ul').listview();
        window.setTimeout(update_twit, 5000);
    },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        window.setTimeout(update_twit, 20000);
    }
    });
    })
    </script>

Answer 1

Hi all I fixed this issue. The problem is related with div=content's style.

 <div id="wrapper2"> 
<!--<div data-role="content">-->  
<div id="panoListDetay"></div>
<!--</div>-->
</div>

Answer 2

// Append the HTML to your element inside your myScroll
setTimeout(function () {
       myScroll.refresh();
   }, 100);

There is no problem with using the data-role="content"

You should refresh your iscroll after appending the data