I have a jquerymobile multipage document.
With this layout
@using ParadigmaNet.Infraestructure;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="@Url.Content("~/css/ParadigmaNTouch.css")" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@Scripts.Render("~/Scripts/paradigmaN_Ajax.js")
<script type="text/javascript">
var Wres = $(window).width();
var Hres = $(window).height();
document.cookie = "ScreenRes=" + Wres + "x" + Hres;
</script>
if (IsSectionDefined("scripts"))
{
@RenderSection("scripts", false)
}
</body>
</html>
And a document with two pages
@model ParadigmaNet.Areas.Documentos.Models.Merlin_MovimientoDocumentosFacturacion_Enc
@using ParadigmaNet.Infraestructure
@using ParadigmaNet.Areas.Items.Models
@using ParadigmaNet.Areas.Documentos.Models
@using ParadigmaNet.Areas.Items.Controllers;
@{
Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@*Pagina principal de pedidos*@
<div id="DocumentoPedidoPrincipal" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" >
@Html.ActionLink("Cancelar", "DocsCancelar", "Docs", new { area = "Documentos" }, new { StrIdDocumento = "", data_icon="delete" })
<h1 id="NombreItem">Ubicacion: @SessionBag.Current.IntIdUbicacion</h1>
@Html.ActionLink("Grabar", "DocsGuardar", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_icon="check" })
<div style="padding:2px;">
@if (ViewBag.ParaEdicion)
{
@MyHelpers.menu("MenuItemEnPedido", new System.Collections.ArrayList { @Html.ActionLink("Detalle", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { @class = "no-Ajax ui-btn ui-btn-up-a" }) })
}
else
{
string detalle = "<a id=" + ParadigmaNTouchHelpers.quote("MostrarDetallePedido") + " href=" + ParadigmaNTouchHelpers.quote("#") + " onclick=" + ParadigmaNTouchHelpers.quote("mostrarDetallePedido(true);") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">";
string condiciones = "<a id=" + ParadigmaNTouchHelpers.quote("ItemCondiciones") + " href=" + ParadigmaNTouchHelpers.quote("#CondicionesDocumento") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">Condiciones</a>";
@MyHelpers.menu("MenuItemEnPedido",
new System.Collections.ArrayList
{
@Html.ActionLink("Adiciones", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="a" , id="ItemAdiciones" , @class="ui-disabled"})
,@Html.ActionLink("Componentes", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="c" , id="ItemComponentes" , @class="ui-disabled"})
,@MvcHtmlString.Create(condiciones) //@Html.ActionLink("Condiciones", "", "", new {}, new { data_role="button", data_ajax = "false" ,data_theme="e" , id="ItemCondiciones" , @class="ui-disabled" , onclick="mostrarCondiciones(true)"})
,@Html.ActionLink("Eliminar", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="d" , id="ItemEliminar" , disable="true",@class="ui-disabled"})
,@Html.ActionLink("Detalle", "", "", new {} , new { data_role="button", id = "MostrarDetallePedido", data_ajax = "false" ,data_theme="b", onclick="mostrarDetallePedido(true)"})
}
, 1, "c")
}
</div>
</div>
<div id="BodyContent" data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
<div id="LineasTouchContainer">
@ParadigmaNTouchHelpers.TouchContainer(ViewBag.LineasList, ViewBag.LineasTouchContainer);
</div>
<div id="ItemsTouchContainer">
@ParadigmaNTouchHelpers.TouchContainer(ViewBag.ItemsList, ViewBag.ItemsTouchContainer)
</div>
<div id="GruposTouchContainer">
</div>
<div id="QuickList">
@ParadigmaNTouchHelpers.TouchContainer(ViewBag.QList, ViewBag.QuickListAccess)
</div>
<div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetalleDocumento" class="ParadigmaNDetallePedidoHide">
<div data-role='button' onclick="mostrarDetallePedido(false)" data-theme="b">Ocultar Detalle</div>
<div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetallePedidoRegistros">
@if (1==1){
Merlin_MovimientoDocumentosFacturacion_Enc DatosDoc = (Merlin_MovimientoDocumentosFacturacion_Enc)SessionBag.Current.DocEditar;
<div data-role="collapsible" data-collapsed="false">
<h3>Datos del Pedido</h3>
Abierto por @DatosDoc.StrUsuarioGenera<br />
A las @DatosDoc.DatFechaDocumento<br />
Mesa: @DatosDoc.IntIdMesa
</div>
}
</div>
@foreach (Merlin_Movimientos_Pedidos Item in SessionBag.Current.DocEditar.Merlin_MovimientoDocumentos_Pedidos_Enc.Merlin_Movimientos_Pedidos)
{
Html.RenderPartial("DocsDetalleTransaccionPedido", Item);
}
</div>
</div>
</div>
@*Pagina de condiciones*@
<div id="CondicionesDocumento" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" >
<a href="#" data-icon="home" onclick="mostrarCondiciones(false)">Volver</a>
<h1 id="TituloCondiciones">Editando condiciones</h1>
@if (1 == 1)
{
<a>Hola Mundo</a>
}
</div>
<div data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:50%; top:1em; position:relative;left:0em;" data-theme="a" >
<ul id ="CondicionesDocumentoDisponibles" data-role="listview" data-filter="true" data-inset="true">
</ul>
</div>
<div class="ui-block-b" style="width:48%;position:relative; left:1%;">
<ul id ="CondicionesDocumentoSeleccionadas" data-role="listview" data-filter="false" data-inset="true" style="left:51%;top:1em;postion:relative;" >
</ul>
</div>
</div>
</div>
</div>
@section scripts {
<script type="text/javascript">
$('#CondicionesDocumentoDisponibles').listview();
$('#CondicionesDocumentoSeleccionadas').listview();
$('#DetalleDocumento').listview();
</script>
}
The document is called by redirecttoaction() into a controller method, until here everything is ok.
The problem is that the second page id=”CondicionesDocumento” don’t render into _Layout
The problem is that jQUery mobile render all pages only for the firs call, other calls only render the first page on the document.
After the first call only one page must be included per document.