Strange behaviour back button and $.mobile.changePage

Strange behaviour back button and $.mobile.changePage

We are quite new with JQuery mobile and managed to do multiple pages in single HTML working well.

In our browse.html page we have pages for 
  • practice-list-page
  • practiceitem-list-page
  • practiceitem-detail-page
The page flow between one page is working well. But then after few back and forth between pages (either through back button or click on listview then redirect $.mobile.changePage, page flow has a strange behaviour ie. practiceitem-detail-page page twice. It seem like remembering the history of previous click/tap.

Even we've tried  on mobileinit as follow:
      
$.mobile.hashListeningEnabled = false;
//$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;

Didn't help either. We tested with both Chrome and IE and it's the same behaviour.
 
We are using:

I'm appreciated your feedback.

Thanks

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Test Home</title>
  6. <meta name="viewport" />
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
  8. <style>
  9. .ui-li-desc {
  10. white-space:normal;
  11. }
  13. </style>
  14. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  15. <script type="text/javascript">
  16. // This mobileinit method needs to be put before JQueryM
  18. $(document).on( "mobileinit", function() {
  19. $.mobile.hashListeningEnabled = false;
  20. //$.mobile.linkBindingEnabled = false;
  21. $.mobile.pushStateEnabled = true;
  22. $.mobile.changePage.defaults.changeHash = false;
  24. console.log('pass');
  25. var storedsitepreference = localStorage.getItem('account-login');
  26. var IS_JSON = true;
  27. try
  28. {
  29. var accountloginjson = $.parseJSON(storedsitepreference);
  30. ls_userid = accountloginjson.userid;
  31. ls_username = accountloginjson.username;
  32. }
  33. catch(err)
  34. {
  35. IS_JSON = false;
  36. console.log('error');
  37. }


  40. });
  41. </script>
  42. <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>  
  44. <script type="text/javascript">
  46. $(document).on('pagebeforeshow', '#practice-list-page', function()
  47. {   
  48. var page = pageObject.page;
  49. var reclimit = pageObject.reclimit;
  51. userid = ls_userid;
  52. username = ls_username;
  54. var url = 'http://practice.dewagear.com/webservices/',
  55. mode = 'server.php?',
  56. queryName = '&query=GetPractices',
  57. parameters = 'userid=' + userid + '&page=' + page + '&reclimit=' + reclimit  ,
  58. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';     
  59. $.ajax({
  60. type: 'GET',
  61. url: url + mode + parameters + queryName,
  62.   dataType: "jsonp",
  63. jsonpCallback: "GetPractices",
  64. contentType: 'application/json; charset=utf-8',
  65. success: function (result) 
  66. {
  67. $('#practice-list-listview').empty();
  68. $.each(result, function(i, row) {
  69. $('#practice-list-listview').append('<li data-datecreated="' + row.datecreated + '" id="prd_' + row.practiceid + '"><a href="#"><h3>' + row.name + '</h3><p>' + row.practicetypecategoryname + ', ' +  row.noofreps  + ' reps</p></a></li>');
  70. });
  71. $('#practice-list-listview').listview({
  72. autodividers:true,
  73. autodividersSelector: function (li) {
  74. var d = new Date(li.data("datecreated"));
  76. console.log(d);
  78. var curdate = d.getDate();
  79. var curmonth = d.getMonth();
  80. curmonth++;
  81. var curyear = d.getFullYear();
  83. var dateSubmit = curdate + '/' + curmonth + '/' + curyear;
  85. return dateSubmit;
  86. }
  87. }).listview('refresh');

  90. },
  91. error: function (jqXHR, textStatus, errorThrown) {
  92. console.log(url + mode + parameters + queryName),
  93. console.log(errorThrown);
  94. console.log(textStatus);
  96. }
  97. });  
  99. $(document).on('click', '#practice-list-listview li',function (event) {
  100. pageObject.practiceid = $(this).attr("id").substr(4);
  101. $.mobile.changePage("#practiceitem-list-page", { transition: "fade" });
  102. });

  104. });
  106. $(document).on('pagebeforeshow', '#practiceitem-list-page', function()
  107. {  
  108.   console.log("#practiceitem-list-page - pass - start");
  109.   var practiceid = pageObject.practiceid;
  111.   var url = 'http://practice.dewagear.com/webservices/',
  112. mode = 'server.php?',
  113. queryName = 'query=GetPracticeItems',
  114. parameter = '&practiceid=' + practiceid,
  115. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';  

  117. console.log(url + mode + queryName + parameter);
  119. $.ajax({
  120. type: 'GET',
  121. url: url + mode + queryName + parameter,
  122. beforeSend : function() {$.mobile.loading('show')},
  123. complete   : function() {$.mobile.loading('hide')},
  124. dataType: "jsonp",
  125. jsonpCallback: "GetPracticeItems",
  126. contentType: 'application/json; charset=utf-8',
  127. success: function (result) 
  128. {
  129. $('#practiceitem-list-listview').empty();
  130. $.each(result, function(i, row) {
  131. //console.log(JSON.stringify(row));
  132. $('#practiceitem-list-listview').append('<li id="pid_' + row.practiceitemid + '"><a href="#"><h3>' + row.name + ' (' + row.sequenceno + ')</h3><p>Measurements: ' + row.measurename1 + ' / ' + row.measurename2 + ' / ' + row.measurename3 + '</p></a></li>');
  133. });
  134. $('#practiceitem-list-listview').listview('refresh');
  137. },
  138. error: function (jqXHR, textStatus, errorThrown) {
  139. console.log(errorThrown);
  140. console.log(textStatus);
  142. }
  143. });

  145. $(document).on('click', '#practiceitem-list-listview li',function (event) {
  147. console.log('pass - #practiceitem-list-page - tap - start');
  149. pageObject.practiceitemid = $(this).attr("id").substr(4);
  151. $.mobile.changePage("#practiceitem-detail-page", { transition: "slide" });
  153. console.log('pass - #practiceitem-list-page - tap - end');
  154. });

  156. console.log('pass - #practiceitem-list-page - end');
  157. });
  159. $(document).on('pagebeforeshow', '#practiceitem-detail-page', function()
  160. {  
  161. console.log('pass - #practiceitem-detail-page - start');
  163. $(document).on('click', '#save_button', function (event) {
  164. console.log('pass - #practiceitem-detail-page - save_button - start');
  166. practiceitemid = pageObject.practiceitemid;
  168. var measureoptionid1 = $('#measureoptionid1').val();
  169. var measureoptionid2 = $('#measureoptionid2').val();
  170. var measureoptionid3 = $('#measureoptionid3').val();
  172. var url = 'http://practice.dewagear.com/webservices/',
  173. mode = 'server.php?',
  174. queryName = 'query=UpdatePracticeItem',
  175. parameter = '&practiceitemid=' + practiceitemid + '&measureoptionid1=' + measureoptionid1 + '&measureoptionid2=' + measureoptionid2 + '&measureoptionid3=' + measureoptionid3,
  176. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';  

  178. console.log(url + mode + queryName + parameter);
  180. $.ajax({
  181. type: 'GET',
  182. url: url + mode + queryName + parameter,
  183. beforeSend : function() {$.mobile.loading('show')},
  184. complete   : function() {$.mobile.loading('hide')},
  185. dataType: "jsonp",
  186. jsonpCallback: "UpdatePracticeItem",
  187. contentType: 'application/json; charset=utf-8',
  188. success: function (result) 
  189. {
  190. $.mobile.changePage("#practiceitem-list-page", { transition: "slide" });
  191. },
  192. error: function (jqXHR, textStatus, errorThrown) {
  193. console.log(errorThrown);
  194. console.log(textStatus);
  196. }
  197. });
  199. console.log('pass - #practiceitem-detail-page - save_button - end');
  202. });
  204. console.log('pass - #practiceitem-detail-page - end');
  207. });
  209. // Store object
  210. var pageObject = {
  211. userid : '',
  212. username : '',
  213. practiceid : '',
  214. practiceitemid : '',
  215. page : '',
  216. reclimit : ''
  217. }
  219. </script>
  221. </head>
  222. <body>
  223. <div data-role="page" id="practice-list-page">
  224. <div data-theme="a" data-role="header" data-position="fixed" >
  225. <h3 id="SiteTitle">Browse</h3>
  226. <div data-role="navbar">
  227. <ul>
  228. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  229. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Practice</a></li>
  230. <li><a href="post.html" data-ajax="false" data-icon="plus">Analysis</a></li>
  231. </ul>
  232. </div>
  233. </div>              
  234. <div data-role="content" data-theme="a" data-fullscreen="true">
  235. <div class="example-wrapper" data-iscroll>
  236. <ul data-role="listview"  id="practice-list-listview" data-theme="a" data-inset="true"></ul>
  237. </div>
  238. </div>
  239. <div data-theme="a" data-role="footer"  data-position="fixed" >
  240. <div data-role="navbar" >
  241. <ul>
  242. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  243. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  244. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  245.   </ul>
  246. </div>
  247. </div>            
  248. </div>
  249. <div data-role="page" id="practiceitem-list-page">
  250. <div data-theme="a" data-role="header" data-position="fixed" >
  251. <a href="#practice-list-page" class="ui-btn-left" data-rel="back" data-transition="slide" id="back-to-ads">Back</a>
  252. <h3 id="SiteTitle">Browse</h3>
  253. <div data-role="navbar">
  254. <ul>
  255. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  256. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Practice</a></li>
  257. <li><a href="post.html" data-ajax="false" data-icon="plus">Analysis</a></li>
  258. </ul>
  259. </div>
  260. </div>              
  261. <div data-role="content" data-theme="a" data-fullscreen="true">
  262. <div class="example-wrapper" data-iscroll>
  263. <ul data-role="listview"  id="practiceitem-list-listview" data-theme="a" data-inset="true">
  264. <li data-role="list-divider" data-theme="a">Select a practice item</li>
  265. </ul>
  267. </div>
  268. </div>
  269. <div data-theme="a" data-role="footer"  data-position="fixed" >
  270. <div data-role="navbar" >
  271. <ul>
  272. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  273. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  274. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  275.   </ul>
  276. </div>
  277. </div>                
  278. </div>
  279. <div data-role="page" id="practiceitem-detail-page">
  280. <div data-theme="a" data-role="header" data-position="fixed">
  281. <a href="#practiceitem-list-page" class="ui-btn-left" data-rel="back" data-transition="slide" id="back-to-ads">Back</a>
  282. <h3 id="SiteTitle">Home</h3>
  283. <div data-role="navbar">
  284. <ul>
  285. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  286. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Ad</a></li>
  287. <li><a href="#" data-icon="navigation" data-iconpos="notext" data-role="button">Change City</a></li>
  288. </ul>
  289. </div>
  290. </div>              
  291. <div data-role="content" data-theme="a" data-fullscreen="true">
  292. <fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
  293. <legend>Measurements:</legend>
  294. <select name="measureoptionid1" id="measureoptionid1" data-icon="false">
  295. <option value="1" selected>Good </option>
  296. <option value="2">Not Bad </option>
  297. <option value="3">Bad </option>
  298. </select>
  299. <select name="measureoptionid2" id="measureoptionid2" data-icon="false">
  300. <option value="8" selected>Straight</option>
  301. <option value="4">Left</option>
  302. <option value="5">Right</option>
  303. <option value="6">Short</option>
  304. <option value="7">Long</option>
  305. <option value="11">Not Applicable</option>
  306. </select>
  307. <select name="measureoptionid3" id="measureoptionid3" data-icon="false">
  308. <option value="9" selected>Perfect</option>
  309. <option value="10">Not Perfect (X)</option>
  310. <option value="12">Not Applicable</option>
  311. </select>
  312. </fieldset>
  313. <button class="" id="save_button">Save</button>
  314. </div>
  315. <div data-theme="a" data-role="footer"  data-position="fixed" >
  316. <div data-role="navbar" >
  317. <ul>
  318. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  319. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  320. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  321.   </ul>
  322. </div>
  323. </div>                
  324. </div>
  325. </body>
  326. </html>