JQM 1.3 panel + iscrollview + dynamically loaded pages

JQM 1.3 panel + iscrollview + dynamically loaded pages

Hi all,

I'm trying to implement a listview that has data-iscroll enabled where pages are loaded dynamically on pageinit.

I currently have 2 external pages where there is a listview with data-iscroll set and on pageinit; one page get's loaded into the index.html's content and the other to a panel.

Basically; it's like this for my index.html page:

  1. <html>
  2.       <head>
  3.             <meta charset="utf-8" />
  4.             <meta name="viewport" content="width=device-width, initial-scale=1" />
  5.       
  6.             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
  7.       
  8.             <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  9.             <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
  10.       
  11.             <script src="iscroll.js" type="text/javascript"></script>
  12.             <script src="jquery.mobile.iscrollview.js" type="text/javascript"></script>
  13.       
  14.             <script type="text/javascript" charset="utf-8" src="my.js"></script>
  15.       </head>
  16.       <body>
  17.             <div data-role="page">
  18.                    <div id="mainPageWrapper">
  19.                         <div data-role="content" id="content">
  20.                               <!-- dynamically inserted listview goes here -->
  21.                         </div><!-- content -->
  22.                   </div><!-- mainPageWrapper -->
  23.       
  24.                   <div data-role="panel" id="sidePanel" data-position="right" data-display="overlay">
  25.                         <!-- dynamically inserted listview goes here -->
  26.                   </div><!-- sidePanel -->
  27.       
  28.             </div><!-- page -->
  29.       </body>
  30. </html>

 I then have 2 separate HTML pages that consists of the same thing except for the listview ID:
      listviewPage1.html has the listview ID of listview1
      listviewPage2.html has the listview ID of listview2

  1. <html>
  2.       <body>
  3.             <div id="listviewPage1Wrapper">
  4.                   <ul data-role="listview" data-iscroll="scroller" id="listview1">
  5.                         ...lots of data goes here...
  6.                   </ul>
  7.             </div><!-- wrapper -->
  8.       </body>
  9. </html>

Javascript code ( my.js):

  1. $(document).live('pageinit', function(){
  2.       loadPages('content', 'listviewPage1.html');
  3.       loadPages('sidePanel', 'listviewPage2.html');
  4. }
  5.       
  6. function loadPages(loadToDivID, pageToLoad){
  7.       $("#"+ loadToDivID).empty();
  8.       
  9.       $.get(pageToLoad, function(data) {
  10.             var $tempElement = $(data).appendTo($('#' + loadToDivID));
  11.             $tempElement.trigger('create');
  12.       });
  13. }

All libraries are also properly included and I know this because when I have the listviews directly in the content and side panel; they work perfectly.

Does anyone know what I'm doing wrong and how to fix it?

Thanks.