I am using a razor template so I can reduce the amount of clutter in my mvc views when working on code. I have created "section" which will render as the seperate pages required for my mobile pages as follows:

2.    <div data-role="page" id="page2">
3.             <div data-role="header">
4.               @if (IsSectionDefined("Header2"))
5.                 {
6.                     @RenderSection("Header2")
7.                 }
8.                 else
9.                 {
10.                 }
11.             </div>
12.           
13.             <div data-role="content">
14.                 @if (IsSectionDefined("Content2"))
15.                 {
16.                     @RenderSection("Content2")
17.                 }
18.                 else
19.                 {
20.                 }
21.             </div>
22.            
23.             <div data-role="footer">
24.               @if (IsSectionDefined("Footer2"))
25.                 {
26.                     @RenderSection("Footer2")
27.                 }
28.                 else
29.                 {
30.                 }
31.             </div>

I use the same template as above for up to 3 pages.

My issue at the moment is I have assigned some code to my page 2 using:

2. @section Content2{
3.             <div id="machinesearch" class="ui-content">
4.                 <ul id="machinelist" data-autodividers="true" data-theme="d" data-divider-theme="a" data-filter="true" data-role="listview">
5.                     @foreach (var item in Model.Plants)
6.                     {
7.                         <li><a href="#page1" onclick="javscript:MachineSet($(this).find('input').val(),$(this).text());">@item.Asset_Descriptor<input id="Sap_ID" type="hidden" value="@item.Asset_SAP_ID"/></a></li>      
8.                     }
9.                 </ul>
10.             </div>
11.     }

And my link to show this page is:

1.     <a id="testbutton" href="#page2" data-role="button">TEST</a>

When I click the link "TEST" the page loads however there is no content displayed.

If I go back to my initial page and refresh the page then click the "TEST" button my listview is displayed.

I have tried to hook in to the "TEST" button click event and run the following:

2.     $("#testbutton").click(function(){
3. 
   
4.     $('#page2').trigger('pagecreate');
5.     $("#machinelist").listview('refresh');
6.     alert("test");
7. 
   
8.     });

But this does not seem to make any difference.

Any ideas? 

I can see the data is all loaded in correctly when I view the html source of my first page which also contains the html for the second page. It seems to be because razor is injecting the data in to page 2 after the page 1 is loaded.