jQuery Forum

1. $List.parent().trigger('create');

1.         $("[data-role=footer]").fixedtoolbar({ tapToggle: false });
2. $("[data-role=footer]").fixedtoolbar({ visibleOnPageShow: true });

2. <div id="listPage" data-role="page">
3.         <div data-role="header" id="applicationHeader" data-theme="b" data-position="fixed">
4.             <h1 class="ui-title" role="heading" aria-level="1">Mobile</h1>
5.         </div> 
6. 
   
7.         <div data-role="content" id="applicationContent">
8.              <ul id='ListTable' data-role="listview" data-inset='false'>  
9.                 <!-- Placeholder for list table -->          
10.             </ul> 
11.         </div> 
12. 
    
13.         <div data-role="footer" id="applicationFooter" data-theme="b" data-position="fixed">
14.             <div id="navbar" data-role="navbar" > 
15.                 <ul> 
16.                     <li class="ui-btn-active"><a href="#listPage" id="list" data-icon="grid" data-transition="none">List</a></li> 
17.                     <li><a href="#StuffPage" id="stuff" data-icon="star" data-transition="none">Stuff</a></li> 
18.                     <li><a href="#MaorStuffsPage" id="moar" data-icon="alert" data-transition="none">Moar</a></li> 
19.                 </ul> 
20.             </div>
21.         </div> 
22. 
    
23.     </div> <!-- end list page -->

1. module.refreshStuff= function(stuffs) {
2. $List = $('#ListTable');
4. // append each stuff to the table
5. if(!$List.innerHTML)
6. $taskList.innerHTML = '';
8. $.each(stuffs, function(index, stuff) { 
10.                         $List.append(
11.                             $('<li>').attr('id', id).append(
12.                                       $('<a>').attr('href','#newPage').attr('data-transition', 'slide').append(
13.                                       $('<h3>').text(stuff.name),
14.                                       $('<p>').text(stuff.description)
15.                             ))); 
16. });
17. try {
18. //$List.parent().trigger('create');
19. $List.listview('refresh');
20. } catch (error) {
21. //console.log(error);
22. }
23. }

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinitevent. This event is explained in detail at the bottom of this page.