Jquerymobile razor template not rendering html - html

Question

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:
<div data-role="page" id="page2">
<div data-role="header">
#if (IsSectionDefined("Header2"))
{
#RenderSection("Header2")
}
else
{
}
</div>
<div data-role="content">
#if (IsSectionDefined("Content2"))
{
#RenderSection("Content2")
}
else
{
}
</div>
<div data-role="footer">
#if (IsSectionDefined("Footer2"))
{
#RenderSection("Footer2")
}
else
{
}
</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:
#section Content2{
<div id="machinesearch" class="ui-content">
<ul id="machinelist" data-autodividers="true" data-theme="d" data-divider-theme="a"
data-filter="true" data-role="listview">
#foreach (var item in Model.Plants)
{
<li>#item.Asset_Descriptor<input id="Sap_ID" type="hidden" value="#item.Asset_SAP_ID"/></li>
}
</ul>
</div>
}
And my link to show this page is:
$("#testbutton").click(function(){
$('#page2').trigger('pagecreate');
$("#machinelist").listview('refresh');
alert("test");
});
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.

Answer 1

You aren't actually showing the page.....
$.mobile.changePage("#page2");
will show the page.