Search jQuery

jQuery Forum

Screen name:
Successful

Successful's Profile

1 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jQuery Mobile multi-page swipe (MVC4, #C, .NET)
[1Reply]
- 15-Feb-2013 03:01 AM
- Forum: jQuery Mobile
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 ?
1. My ID's of pages are unique.
2. My data-role="page" contains sections: header, content, footer.
3. My model thats loops contains more than 1 row.
This is my View:
2. @model List<itsperfect.Extreme.Web.Booking.Models.BookingDays>
4. @{
5. ViewBag.Title = "Välj din tid";
6. Layout = "~/Views/Shared/_MobileSwipe.Mobile.cshtml";
7. }
9. <input type="hidden" id="SearchDate" value="@ViewBag.FirstAvalibleDate" />
11. <div id="swipeDiv">
12. @for (int i = 0; i < Model.Count(); i++)
13. {
14. var display = Model[i];
15. <div data-role="page" id="@display.inputDate.ToString("yyyyMMdd")" data-title="Boka tid @display.inputDate.ToString("yyyyMMdd")">
16. <div data-role="header">
17. <div class="header-text">
18. <h4>
19. @display.inputDate.ToString("dddd 'den' d MMMM yyyy")
20. </h4>
21. </div>
22. </div>
24. <div data-role="content">
25. <ul data-role="listview">
26. @if (display.Times != null)
27. {
28. foreach (var t in display.Times.OrderBy(x => x.startDate))
29. {
30. <li>
31. <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>
32. </li>
33. }
34. if (display.inputDate < DateTime.Now.Date)
35. {
36. <li>Datum har passerat</li>
37. }
38. if (display.Times.Count == 0 && display.inputDate >= DateTime.Now.Date)
39. {
40. <li>Inga lediga tider</li>
41. }
42. }
43. else
44. {
45. if (display.WeekNo == 0)
46. {
47. // Scedual missing
48. <li>Inga lediga tider</li>
49. }
50. }
51. </ul>
52. </div>
53. <div data-role="footer"></div>
54. </div>
56. }
57. </div>
59. <script>
60. $('#swipeDiv').live("swipeleft", function () {
61. var nextpage = $(this).next('div[data-role="page"]');
62. // swipe using id of next page if exists
63. if (nextpage.length > 0) {
64. $.mobile.changePage(nextpage, 'slide');
65. }
66. });
67. $('#swipeDiv').live("swiperight", function () {
68. var prevpage = $(this).prev('div[data-role="page"]');
69. // swipe using id of next page if exists
70. if (prevpage.length > 0) {
71. $.mobile.changePage(prevpage, 'slide', true);
72. }
73. });
74. </script>
This is my Layout:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta name="viewport" content="width=device-width">
6. <meta charset="utf-8" />
7. <title>@ViewBag.Title </title>
8. @Html.MetaAcceptLanguage()
9. <script src="@Url.Content("~/Scripts/kendo/2012.3.1121/jquery.min.js")"></script>
10. @Scripts.Render("~/bundles/jquerymobile")
11. @Styles.Render("~/Content/Mobile/css")
12. @Styles.Render("~/Content/jquerymobile/css")
13. </head>
14. <body>
15. @RenderBody()
16. </body>
17. </html>
20. <script>
21. // If i dont use this, old layout getting cached.
22. $(document).ready(function () {
23. $.ajaxSetup({ cache: false });
24. });
25. </script>
This is how my source code looks like:
2. <html class="ui-mobile"><head><base href="http://localhost:50491/84802137/Boka/SearchMobile">
3. <meta name="viewport" content="width=device-width,maximum-scale=10, user-scalable=yes">
4. <meta charset="utf-8">
5. <title>Boka tid 20130220</title>
6. <meta name="accept-language" content="sv-SE">
8. <script src="/Scripts/kendo/2012.3.1121/jquery.min.js"></script>
9. <script src="/Scripts/mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
11. <link href="/Content/Site.Mobile.css" rel="stylesheet" type="text/css">
13. <link href="/Content/mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css">
15. <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
16. <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>
17. <body class="ui-mobile-viewport ui-overlay-c">
19. <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;">
20. <div data-role="header" class="ui-header ui-bar-a" role="banner">
21. <div class="header-text">
22. <h4>
23. onsdag den 20 februari 2013
24. </h4>
25. </div>
26. </div>
28. <div data-role="content" class="ui-content" role="main">
29. <ul data-role="listview" class="ui-listview">
30. <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">
31. <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>
32. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
33. <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">
34. <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>
35. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
36. <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">
37. <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>
38. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
39. <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">
40. <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>
41. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
42. <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">
43. <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>
44. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
45. <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">
46. <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>
47. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
48. <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">
49. <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>
50. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
51. <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">
52. <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>
53. </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
55. </ul>
56. </div>
57. <div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo"></div>
58. </div></body></html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend