MVC Razor Template with multiple pages not rendering

MVC Razor Template with multiple pages not rendering

Hi all,

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:

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

  1. @section Content2{
  2.             <div id="machinesearch" class="ui-content">
  3.                 <ul id="machinelist" data-autodividers="true" data-theme="d" data-divider-theme="a" data-filter="true" data-role="listview">
  4.                     @foreach (var item in Model.Plants)
  5.                     {
  6.                         <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>      
  7.                     }
  8.                 </ul>
  9.             </div>
  10.     }
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:
  1.     $("#testbutton").click(function(){

  2.     $('#page2').trigger('pagecreate');
  3.     $("#machinelist").listview('refresh');
  4.     alert("test");

  5.     });
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.