asp.net mvc - JQuery Mobile Menu does not work after loading another view -
i working on asp.net mvc 4 mobile template , trying have navigation menu on _layout view
environment: xp, visual web developer 2010 express, vb.
following _layout view
<head> <meta charset="utf-8" /> <title>@viewdata("title")</title> <meta name="viewport" content="width=device-width" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @styles.render("~/content/mobilecss", "~/content/css") @scripts.render("~/bundles/modernizr") </head> <body> @*---master page---*@ <div data-role="page" data-theme="b"> @*---header image---*@ <div data-role="header"> <div> <img src='@url.content("~\content\images\banner.jpg")' alt="header img" style="max-width:100%;" /> </div> </div> @*---menu---*@ <a href="#" id="search-area-switch" >menu</a> <div id="dvmenu" style="display:none"> <ul data-role="listview" data-theme="a" > <li data-role="list-divider"> select search type</li> @code dim menu new dictionary(of string, string)() menu = ctype(session("menu"), dictionary(of string, string)) @for each item keyvaluepair(of string, string) in menu @<li> <a href='@item.value' > @item.key </a> </li> next end code </ul> </div> @*---page heading---*@ @viewdata("searchtype").tostring() @*---content/child view---*@ <div data-role="content" > @renderbody() </div> </div> @scripts.render("~/bundles/jquery", "~/bundles/jquerymobile") @rendersection("scripts", required:=false) @*--- menu toggle script ---*@ <script type="text/javascript"> $('#search-area-switch').live('tap', function (event) { $('#dvmenu').toggle("slow"); }); </script> </body> now on initial load menu toggling works fine, when select item under menu, returns view, looks menu not work more.
what doing wrong ?
i got now, had disable ajax on menu item
so adding 'data-ajax="false"' worked me. following complete _layout
<head> <meta charset="utf-8" /> <title>@viewdata("title")</title> <meta name="viewport" content="width=device-width" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @styles.render("~/content/mobilecss", "~/content/css") @scripts.render("~/bundles/modernizr") @scripts.render("~/bundles/jquery", "~/bundles/jquerymobile") @rendersection("scripts", required:=false) @*--- menu toggle script ---*@ <script type="text/javascript"> $('#search-area-switch').live('tap', function (event) { $('#dvmenu').toggle("slow"); }); </script> </head> <body> @*---master page---*@ <div data-role="page" data-theme="b"> @*---header image---*@ <div data-role="header"> <div> <img src='@url.content("~\content\images\banner.jpg")' alt="header img" style="max-width:100%;" /> </div> </div> @*---page heading---*@ <div data-role="header"> <h4 style="text-align: left; margin-left: .1em;">@viewdata("searchtype").tostring().toupper()</h4> <a id="search-area-switch" href="#" data-icon="arrow-d" class="ui-btn-right">menu</a> </div> @*---menu---*@ <div id="dvmenu" style="display:none;" > <ul data-role="listview" data-theme="a" > <li data-role="list-divider"> select search type</li> @code dim menu new dictionary(of string, string)() menu = ctype(session("menu"), dictionary(of string, string)) @for each item keyvaluepair(of string, string) in menu @<li> <a href='@item.value' data-ajax="false" id='@string.concat(item.key, "_menuid")' > @item.key </a> </li> next end code </ul> </div> @*---content/child view---*@ <div data-role="content" > @renderbody() </div> </body>
Comments
Post a Comment