jquerymobiledynamicloadiscroll4

Jquery Mobile + iscroll4 + dynamic page load

I'm new to StackOverflow and this is my first question so excuse me if I'm doing something wrong.

My question is how to get iScroll 4 to work on multiple divs on a page where that page was dynamically loaded using the load() method.

So to break it down into something more simple:

I have a separate page called page.html

<html>
      <body>

            <ul data-iscroll="scroller">
               ..lots of data..
            </ul>

            <ul data-iscroll="scroller">
               ..lots of data..
            </ul>

      </body>
</html>

Then on my index.html page I have the usual header tags with all libraries and such loaded fine (I know it works because when I have the list actually in the index.html page -> iScroll works fine. Just not when the list is loaded dynamically)

The body of my index.html is

<body>

      <div data-role="page>
            <div data-role="header" data-position="fixed">
                  <h3>header</h3>
            </div>

            <div data-role="content" id="content">
                 <!-- always empty - data will be loaded here -->
            </div>

            <div data-role="footer" data-position="fixed">
                 <h3>footer</h3>
            </div>
      </div>

</body>

Pages are loaded into the content by (which also works because I can see everything)

$("#content").load("page.html",function(){
    $("#content").trigger('create');
});

And just so that you also know, my included libraries are

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<!-- jScroll -->
<script src="iscroll.js" type="text/javascript"></script>
<script src="jquery.mobile.iscrollview.js" type="text/javascript"></script>

All the data is displayed and everything is there when I inspect the element using Chrome but the 2 <ul> does not scroll separately like I expect it to. Does anyone know what I'm doing wrong?

PS. I'm also running this on a simple server using python -m SimpleHTTPServer 8013 and running the Ripple emulator by PhoneGap to test screen resolutions and such because this will be for the mobile phones.

Solution

  • This might help you to understand and sole your problem I hope.. if you are still not clear let me know I will explain you further...My brief explanation about iScroll is here