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

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


  34. });
  35. </script>
  36. <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>  
  37. <script type="text/javascript">
  38. $(document).on('pagebeforeshow', '#practice-list-page', function()
  39. {   
  40. var page = pageObject.page;
  41. var reclimit = pageObject.reclimit;
  42. userid = ls_userid;
  43. username = ls_username;
  44. var url = 'http://practice.dewagear.com/webservices/',
  45. mode = 'server.php?',
  46. queryName = '&query=GetPractices',
  47. parameters = 'userid=' + userid + '&page=' + page + '&reclimit=' + reclimit  ,
  48. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';     
  49. $.ajax({
  50. type: 'GET',
  51. url: url + mode + parameters + queryName,
  52.   dataType: "jsonp",
  53. jsonpCallback: "GetPractices",
  54. contentType: 'application/json; charset=utf-8',
  55. success: function (result) 
  56. {
  57. $('#practice-list-listview').empty();
  58. $.each(result, function(i, row) {
  59. $('#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>');
  60. });
  61. $('#practice-list-listview').listview({
  62. autodividers:true,
  63. autodividersSelector: function (li) {
  64. var d = new Date(li.data("datecreated"));
  65. console.log(d);
  66. var curdate = d.getDate();
  67. var curmonth = d.getMonth();
  68. curmonth++;
  69. var curyear = d.getFullYear();
  70. var dateSubmit = curdate + '/' + curmonth + '/' + curyear;
  71. return dateSubmit;
  72. }
  73. }).listview('refresh');

  74. },
  75. error: function (jqXHR, textStatus, errorThrown) {
  76. console.log(url + mode + parameters + queryName),
  77. console.log(errorThrown);
  78. console.log(textStatus);
  79. }
  80. });  
  81. $(document).on('click', '#practice-list-listview li',function (event) {
  82. pageObject.practiceid = $(this).attr("id").substr(4);
  83. $.mobile.changePage("#practiceitem-list-page", { transition: "fade" });
  84. });

  85. });
  86. $(document).on('pagebeforeshow', '#practiceitem-list-page', function()
  87. {  
  88.   console.log("#practiceitem-list-page - pass - start");
  89.   var practiceid = pageObject.practiceid;
  90.   var url = 'http://practice.dewagear.com/webservices/',
  91. mode = 'server.php?',
  92. queryName = 'query=GetPracticeItems',
  93. parameter = '&practiceid=' + practiceid,
  94. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';  

  95. console.log(url + mode + queryName + parameter);
  96. $.ajax({
  97. type: 'GET',
  98. url: url + mode + queryName + parameter,
  99. beforeSend : function() {$.mobile.loading('show')},
  100. complete   : function() {$.mobile.loading('hide')},
  101. dataType: "jsonp",
  102. jsonpCallback: "GetPracticeItems",
  103. contentType: 'application/json; charset=utf-8',
  104. success: function (result) 
  105. {
  106. $('#practiceitem-list-listview').empty();
  107. $.each(result, function(i, row) {
  108. //console.log(JSON.stringify(row));
  109. $('#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>');
  110. });
  111. $('#practiceitem-list-listview').listview('refresh');
  112. },
  113. error: function (jqXHR, textStatus, errorThrown) {
  114. console.log(errorThrown);
  115. console.log(textStatus);
  116. }
  117. });

  118. $(document).on('click', '#practiceitem-list-listview li',function (event) {
  119. console.log('pass - #practiceitem-list-page - tap - start');
  120. pageObject.practiceitemid = $(this).attr("id").substr(4);
  121. $.mobile.changePage("#practiceitem-detail-page", { transition: "slide" });
  122. console.log('pass - #practiceitem-list-page - tap - end');
  123. });

  124. console.log('pass - #practiceitem-list-page - end');
  125. });
  126. $(document).on('pagebeforeshow', '#practiceitem-detail-page', function()
  127. {  
  128. console.log('pass - #practiceitem-detail-page - start');
  129. $(document).on('click', '#save_button', function (event) {
  130. console.log('pass - #practiceitem-detail-page - save_button - start');
  131. practiceitemid = pageObject.practiceitemid;
  132. var measureoptionid1 = $('#measureoptionid1').val();
  133. var measureoptionid2 = $('#measureoptionid2').val();
  134. var measureoptionid3 = $('#measureoptionid3').val();
  135. var url = 'http://practice.dewagear.com/webservices/',
  136. mode = 'server.php?',
  137. queryName = 'query=UpdatePracticeItem',
  138. parameter = '&practiceitemid=' + practiceitemid + '&measureoptionid1=' + measureoptionid1 + '&measureoptionid2=' + measureoptionid2 + '&measureoptionid3=' + measureoptionid3,
  139. key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';  

  140. console.log(url + mode + queryName + parameter);
  141. $.ajax({
  142. type: 'GET',
  143. url: url + mode + queryName + parameter,
  144. beforeSend : function() {$.mobile.loading('show')},
  145. complete   : function() {$.mobile.loading('hide')},
  146. dataType: "jsonp",
  147. jsonpCallback: "UpdatePracticeItem",
  148. contentType: 'application/json; charset=utf-8',
  149. success: function (result) 
  150. {
  151. $.mobile.changePage("#practiceitem-list-page", { transition: "slide" });
  152. },
  153. error: function (jqXHR, textStatus, errorThrown) {
  154. console.log(errorThrown);
  155. console.log(textStatus);
  156. }
  157. });
  158. console.log('pass - #practiceitem-detail-page - save_button - end');
  159. });
  160. console.log('pass - #practiceitem-detail-page - end');
  161. });
  162. // Store object
  163. var pageObject = {
  164. userid : '',
  165. username : '',
  166. practiceid : '',
  167. practiceitemid : '',
  168. page : '',
  169. reclimit : ''
  170. }
  171. </script>
  172. </head>
  173. <body>
  174. <div data-role="page" id="practice-list-page">
  175. <div data-theme="a" data-role="header" data-position="fixed" >
  176. <h3 id="SiteTitle">Browse</h3>
  177. <div data-role="navbar">
  178. <ul>
  179. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  180. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Practice</a></li>
  181. <li><a href="post.html" data-ajax="false" data-icon="plus">Analysis</a></li>
  182. </ul>
  183. </div>
  184. </div>              
  185. <div data-role="content" data-theme="a" data-fullscreen="true">
  186. <div class="example-wrapper" data-iscroll>
  187. <ul data-role="listview"  id="practice-list-listview" data-theme="a" data-inset="true"></ul>
  188. </div>
  189. </div>
  190. <div data-theme="a" data-role="footer"  data-position="fixed" >
  191. <div data-role="navbar" >
  192. <ul>
  193. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  194. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  195. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  196.   </ul>
  197. </div>
  198. </div>            
  199. </div>
  200. <div data-role="page" id="practiceitem-list-page">
  201. <div data-theme="a" data-role="header" data-position="fixed" >
  202. <a href="#practice-list-page" class="ui-btn-left" data-rel="back" data-transition="slide" id="back-to-ads">Back</a>
  203. <h3 id="SiteTitle">Browse</h3>
  204. <div data-role="navbar">
  205. <ul>
  206. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  207. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Practice</a></li>
  208. <li><a href="post.html" data-ajax="false" data-icon="plus">Analysis</a></li>
  209. </ul>
  210. </div>
  211. </div>              
  212. <div data-role="content" data-theme="a" data-fullscreen="true">
  213. <div class="example-wrapper" data-iscroll>
  214. <ul data-role="listview"  id="practiceitem-list-listview" data-theme="a" data-inset="true">
  215. <li data-role="list-divider" data-theme="a">Select a practice item</li>
  216. </ul>
  217. </div>
  218. </div>
  219. <div data-theme="a" data-role="footer"  data-position="fixed" >
  220. <div data-role="navbar" >
  221. <ul>
  222. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  223. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  224. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  225.   </ul>
  226. </div>
  227. </div>                
  228. </div>
  229. <div data-role="page" id="practiceitem-detail-page">
  230. <div data-theme="a" data-role="header" data-position="fixed">
  231. <a href="#practiceitem-list-page" class="ui-btn-left" data-rel="back" data-transition="slide" id="back-to-ads">Back</a>
  232. <h3 id="SiteTitle">Home</h3>
  233. <div data-role="navbar">
  234. <ul>
  235. <li><a href="browse.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
  236. <li><a href="post.html" data-ajax="false" data-icon="plus">Post Ad</a></li>
  237. <li><a href="#" data-icon="navigation" data-iconpos="notext" data-role="button">Change City</a></li>
  238. </ul>
  239. </div>
  240. </div>              
  241. <div data-role="content" data-theme="a" data-fullscreen="true">
  242. <fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
  243. <legend>Measurements:</legend>
  244. <select name="measureoptionid1" id="measureoptionid1" data-icon="false">
  245. <option value="1" selected>Good </option>
  246. <option value="2">Not Bad </option>
  247. <option value="3">Bad </option>
  248. </select>
  249. <select name="measureoptionid2" id="measureoptionid2" data-icon="false">
  250. <option value="8" selected>Straight</option>
  251. <option value="4">Left</option>
  252. <option value="5">Right</option>
  253. <option value="6">Short</option>
  254. <option value="7">Long</option>
  255. <option value="11">Not Applicable</option>
  256. </select>
  257. <select name="measureoptionid3" id="measureoptionid3" data-icon="false">
  258. <option value="9" selected>Perfect</option>
  259. <option value="10">Not Perfect (X)</option>
  260. <option value="12">Not Applicable</option>
  261. </select>
  262. </fieldset>
  263. <button class="" id="save_button">Save</button>
  264. </div>
  265. <div data-theme="a" data-role="footer"  data-position="fixed" >
  266. <div data-role="navbar" >
  267. <ul>
  268. <li><a href="preference.html" data-ajax="false" data-icon="location" data-iconpos="notext" data-role="button">Change Network</a></li>
  269. <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
  270. <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
  271.   </ul>
  272. </div>
  273. </div>                
  274. </div>
  275. </body>
  276. </html>