jQuery Mobile multi-page swipe (MVC4, #C, .NET)

Hi, i am trying to display my model values in several different jQuery mobile pages.

But when i use my code only 1 page is rendered in the source code,

wye? & how do i fix it ?

My ID's of pages are unique.
My data-role="page" contains sections: header, content, footer.
My model thats loops contains more than 1 row.

This is my View:

@model List<itsperfect.Extreme.Web.Booking.Models.BookingDays>
@{
ViewBag.Title = "Välj din tid";
Layout = "~/Views/Shared/_MobileSwipe.Mobile.cshtml";
}
<input type="hidden" id="SearchDate" value="@ViewBag.FirstAvalibleDate" />
<div id="swipeDiv">
@for (int i = 0; i < Model.Count(); i++)
{
var display = Model[i];
<div data-role="page" id="@display.inputDate.ToString("yyyyMMdd")" data-title="Boka tid @display.inputDate.ToString("yyyyMMdd")">
<div data-role="header">
<div class="header-text">
<h4>
@display.inputDate.ToString("dddd 'den' d MMMM yyyy")
</h4>
</div>
</div>
<div data-role="content">
<ul data-role="listview">
@if (display.Times != null)
{
foreach (var t in display.Times.OrderBy(x => x.startDate))
{
<li>
<a href="#" class="k-button" onclick="javascript:Forhandsvisning(@display.LocationID , @t.ResourceID,'@string.Join(";", t.ServiceID)','@string.Format("{0:yyyy-MM-dd HH:mm}", t.startDate)','@string.Format("{0:yyyy-MM-dd HH:mm}", t.endDate)',@t.UserResourceID)">@String.Format("{0}-{1}", string.Format("{0:HH:mm}", t.startDate), string.Format("{0:HH:mm}", t.endDate))</a>
</li>
}
if (display.inputDate < DateTime.Now.Date)
{
<li>Datum har passerat</li>
}
if (display.Times.Count == 0 && display.inputDate >= DateTime.Now.Date)
{
<li>Inga lediga tider</li>
}
}
else
{
if (display.WeekNo == 0)
{
// Scedual missing
<li>Inga lediga tider</li>
}
}
</ul>
</div>
<div data-role="footer"></div>
</div>
}
</div>
<script>
$('#swipeDiv').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, 'slide');
}
});
$('#swipeDiv').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
// swipe using id of next page if exists
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, 'slide', true);
}
});
</script>

This is my Layout:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8" />
<title>@ViewBag.Title </title>
@Html.MetaAcceptLanguage()
<script src="@Url.Content("~/Scripts/kendo/2012.3.1121/jquery.min.js")"></script>
@Scripts.Render("~/bundles/jquerymobile")
@Styles.Render("~/Content/Mobile/css")
@Styles.Render("~/Content/jquerymobile/css")
</head>
<body>
@RenderBody()
</body>
</html>
<script>
// If i dont use this, old layout getting cached.
$(document).ready(function () {
$.ajaxSetup({ cache: false });
});
</script>

This is how my source code looks like:

<html class="ui-mobile"><head><base href="http://localhost:50491/84802137/Boka/SearchMobile">
<meta name="viewport" content="width=device-width,maximum-scale=10, user-scalable=yes">
<meta charset="utf-8">
<title>Boka tid 20130220</title>
<meta name="accept-language" content="sv-SE">
<script src="/Scripts/kendo/2012.3.1121/jquery.min.js"></script>
<script src="/Scripts/mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="/Content/Site.Mobile.css" rel="stylesheet" type="text/css">
<link href="/Content/mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css">
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<style id="css-ddslick" type="text/css">.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer; }.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }.dd-selected{ overflow:hidden; display:block; padding:10px; font-weight:bold;}.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}.dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:scroll; }.dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; }.dd-options > li:last-child > .dd-option{ border-bottom:none;}.dd-option:hover{ background:#f3f3f3; color:#000;}.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }.dd-option-priority { float:left; margin: 4px 12px 0px 0px; }.dd-option-selected { background:#f6f6f6; }.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px; z-index: 5000;}.dd-image-right { float:right; margin-right:15px; margin-left:5px;}.dd-container{ position:relative;} .dd-selected-text { font-weight:bold}</style></head>
<body class="ui-mobile-viewport ui-overlay-c">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" id="20130220" data-title="Boka tid 20130220" data-url="/84802137/Boka/SearchMobile" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 480px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<div class="header-text">
<h4>
onsdag den 20 februari 2013
</h4>
</div>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 09:00','2013-02-20 10:00',26)">09:00-10:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 10:00','2013-02-20 11:00',26)">10:00-11:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 11:00','2013-02-20 12:00',26)">11:00-12:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 12:00','2013-02-20 13:00',26)">12:00-13:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 13:00','2013-02-20 14:00',26)">13:00-14:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 14:00','2013-02-20 15:00',26)">14:00-15:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 15:00','2013-02-20 16:00',26)">15:00-16:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="k-button ui-link-inherit" onclick="javascript:Forhandsvisning(1 , 26,'2005','2013-02-20 16:00','2013-02-20 17:00',26)">16:00-17:00</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
</ul>
</div>
<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo"></div>
</div></body></html>

Topic Participants
stefan
feritterzi

jQuery Mobile multi-page swipe (MVC4, #C, .NET)

jQuery Mobile multi-page swipe (MVC4, #C, .NET)

Topic Participants

stefan

feritterzi