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><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>      
        }
    </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.