Reload page from listview in popup
Hi,
I want to Reload the same page after user clicks a choice in a popup menu, which is implemented as a listview inside a popup. I got it to work with jqm 1.2.0 by chopping off the # portion of the url and use that as argument to changePage method. However, with 1.3.1, the selection has to be made twice for the reload to happen. The following simplified code illustrates this situation. The page reload and slide work fine if 1.2.0 is used. In HTML below, the green timestamp is updated by server based on time to avoid ID conflict and the red display strings are updated based on cookie value.
Thanks in advance to any suggestions to get this work again in jqm 1.3.
MvcMobileTest.js file:
function reloadContent(cValue) {
$.cookie('TestCultureInfo', cValue, { path: '/' });
var pagepath = window.location.href;
var idx = pagepath.indexOf('#');
if (idx != -1) {
pagepath = pagepath.substr(0, idx);
}
$.mobile.changePage(pagepath, { reloadPage: true, allowSamePageTransition: true });
}
$(document).bind('mobileinit', function () {
$.mobile.defaultPageTransition = 'slide';
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.css"
rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script>
<script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="/Scripts/MvcMobileTest.js" type="text/javascript"></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.js'></script>
</head>
<body>
<div>
<a href="#popupLangSelect635098570288488673" id="LanguageSelect"
data-rel="popup" data-role="button" data-icon="arrow-d" data-iconpos="right"
data-transition="pop">English (US)</a>
<div id="popupLangSelect635098570288488673" data-role="popup">
<ul data-role="listview" data-inset="true">
<li data-icon="false"><a href='#' onclick='reloadContent("en-us");'>
English (US)</a></li>
<li data-icon="false"><a href='#' onclick='reloadContent("es-mx");'>
Español (México)</a></li>
<li data-icon="false"><a href='#' onclick='reloadContent("zh-cn");'>
中文（简体）</a></li>
</ul>
</div>
</div>
<div>
<h1>Welcome</h1>
</div>
</body>
</html>