Introduce isroll after dom content change

Question

I am creating an application in rhomobile and jquery mobile. I try to use 2 iscroll in my page. In my page i am having 2 li. Initially left side li is empty. When i am click right side li that will add to left side li and removed from right side li. Initially i am using i scroll to view the elements in right side li. That's working fine. But in left side li iscroll not coming when the content exceeds the height. I searched a lot. I got some suggestions but that won't work for me. Those are

First add checkDOMChanges: true in my options, then set time out Eg: setTimeout(function () { myScroll.refresh() }, 0)

My right side ul id is accounts_container, left side ul id is destinations_container

My code:

var destinations_scroll1, accounts_scroll;
function loaded() {
    destinations_scroll1 = new iScroll('destinations_container');
    accounts_scroll = new iScroll('accounts_container', {
        checkDOMChanges: true
    });
setTimeout(function () { accounts_scroll.refresh() }, 0)
}
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', loaded, false);

Then as per this link http://groups.google.com/group/iscroll/browse_thread/thread/6bdf7a2b5552d018

I tried

destinations_scroll1.destroy();
destinations_scroll1= null;
destinations_scroll1= new iScroll('destinations_container');

setTimeout(function() {
destinations_scroll1.refresh();
},0);

In rhosimulator this create normal css scroll but not working in emulator(real devise).

Any suggestions?

score 0 · Answer 1 · answered Apr 01 '12 at 17:19

I am an idiot. In above code i am checking checkDomChanges and refreshing isroll object for right side ul but i am adding dynamic content in left side ul.

var destinations_scroll1, accounts_scroll;
function loaded() {
    accounts_scroll = new iScroll('accounts_container');
    destinations_scroll1 = new iScroll('destinations_container', { checkDOMChanges: true });
    setTimeout(function () {            
            destinations_scroll1.refresh();     
    }, 0);   
}
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', loaded, false);

This is working fine.

Introduce isroll after dom content change

1 Answers1