Help with navigation

Help with navigation

Ok I'm at my wits end and this is the last issue that needs to be resolved before we can roll out the initial version of our dedicated mobile app. I have a page in our mobile app (courses.html) that internally transitions between several jQM "pages" all the while programmatically setting lists with data. Flows like this:

courses.html
 -> List of terms (#terms)
 -> List of disciplines (#disciplines)
 -> List of courses by discipline (#courses)
 -> List of classes by course (#classes)
 -> Class Info (#classinfo)

The first five jQM pages display lists. Terms displays a list that is populated by a SOAP Web Service call. The user clicks a term, the termid is stored and persisted using sessionStorage, and then the user transitions to #disciplines which is a static HTML list. The user selects a discipline, another AJAX call is made to a SOAP Web Service passing in the termid which is stored in sessionStorage along with the disciplineid which was selected from the discipline list. The user is transitioned to the #courses page and the list is updated. This goes on all the way to the end point which is class info. 

I can progress all the way through the navigational flow with no problem all the while seeing appropriate data. However the problem occurs when I click the back button. As soon as I click back and then select a new option from the previous list, the list on the new page is doubled up...or more specifically the list is appended to include the old options for the previous discipline/course along with the new options (newly selected item). I've tried $('#list_coursesbycourseid').html = ''; and nothing seems to clear the list out. I suspect I'm not handling or using the correct events but I'm not entirely sure what's going on. Here's piece of code as an example. WS calls have been omitted:

  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title></title>
  8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  11. <script>
  12. $(document).ready(function () {
  13.     // Load Current Terms
  14.     getCurrentTerms();
  16.     // HANDLER: Handles term click
  17.     $('#list_terms').on('click', 'a', function () {
  18. // Store the selected TermID
  19.         localStorage.termid = $(this).attr('id');
  20. // Change the page to show all disciplines
  21. $.mobile.changePage($('#disciplines'), {
  22.             transition: "slide",
  23.             reverse: false
  24.         });
  25.     });
  27. // HANDLER: Handles discipline click
  28.     $('#list_disciplines').on('click', 'a', function () {
  29. // Store the selected discipline
  30.         localStorage.disciplineid = $(this).attr('id');
  31. // Call the web service, passing in the selected term and selected discipline
  32.         getCoursesByTermAndDiscipline(localStorage.termid, localStorage.disciplineid);
  34. $.mobile.changePage($('#courses'), {
  35. transition: "slide",
  36. reverse: false
  37. });
  38.     });

  40. // HANDLER: Handles course click
  41.     $('#list_courses').on('click', 'a', function () {
  42. // Store the selected discipline
  43.         localStorage.courseid = $(this).attr('id');
  44. // Call the web service, passing in the selected term and selected discipline
  45.         getCoursesByTermAndCourseId(localStorage.termid, localStorage.courseid);

  47. $.mobile.changePage($('#coursesbycourseid'), {
  48. transition: "slide",
  49. reverse: false
  50. });
  51.     });

  53. });

  55. function getCoursesByTermAndCourseId(termid, courseid) {
  56.     $.ajax({
  57.         type: 'post',
  58.         data: { "termid": termid, "courseid": courseid },
  59.         url: '<WEB SERVICE CALL>',
  60.         beforeSend: function () { $.mobile.loading('show') },
  61.         timeout: 10000,
  62.         error: function (xhr, status, error) { alert('Error: ' + xhr.status + ' - ' + error); },
  63.         dataType: 'xml',
  64.         success: function (response) {
  65.             $(response).find('channel').children().each(function () {
  66.                 $.mobile.loading('hide');
  67.                 var elm = $(this);
  68.                 var courseid = elm.find('courseid').text();
  69.                 var course = elm.find('course').text();
  70. var classnumber = elm.find('classnumber').text();
  71.                 var campuslocation = elm.find('room').text();
  72.                 var classstartdate = elm.find('classstartdate').text();
  73.                 var classenddate = elm.find('classenddate').text();
  74.                 var instructor = elm.find('instructor').text();
  75. $('#list_coursesbycourseid').html = '';
  76.                 $('#list_coursesbycourseid').append('<li><a href="#" id="' + classnumber + '"><h3>' + course + '</h3><p>Class Number: ' + classnumber + '<br>Location: ' + campuslocation + '<br>Dates: ' + classstartdate + ' - ' + classenddate + '<br>Instructor: ' + instructor + '</p></a></li>');
  77.                 $('#list_coursesbycourseid').listview('refresh');
  78.             });
  79.         },
  80.         failure: function (msg) { alert(msg); }
  81.     });
  82. }

  84. function getCoursesByTermAndDiscipline(termid, disciplineid) {
  85.     $.ajax({
  86.         type: 'post',
  87.         data: { "termid": termid, "disciplineid": disciplineid },
  88.         url: '<WEB SERVICE CALL>',
  89.         beforeSend: function () { $.mobile.loading('show') },
  90.         timeout: 10000,
  91.         error: function (xhr, status, error) { alert('Error: ' + xhr.status + ' - ' + error); },
  92.         dataType: 'xml',
  93.         success: function (response) {
  94.             $(response).find('channel').children().each(function () {
  95.                 $.mobile.loading('hide');
  96.                 var elm = $(this);
  97.                 var courseid = elm.find('courseid').text();
  98.                 var course = elm.find('course').text();
  100. $('#list_courses').html = '';
  101.                 $('#list_courses').append('<li><a href="#" id="' + courseid + '"><h3>' + course + '</h3></a></li>');
  102.                 $('#list_courses').listview('refresh');
  103.             });
  104.         },
  105.         failure: function (msg) { alert(msg); }
  106.     });
  107. }

  109. function getCurrentTerms() {
  110.     $.ajax({
  111.         type: 'post',
  112.         data: '{}',
  113.         url: '<WEB SERVICE CALL>',
  114.         beforeSend: function () { $.mobile.loading('show') },
  115.         timeout: 10000,
  116.         error: function (xhr, status, error) {alert('Error: ' + xhr.status + ' - ' + error);},
  117.         dataType: 'xml',
  118.         success: function (response) {
  119.             $.mobile.loading('hide');
  120.             $(response).find('channel').children().each(function () {
  121.                 var elm = $(this);
  122.                 var termid = elm.find('termid').text();
  123.                 var term = elm.find('term').text();
  124.                 $('#list_terms').append('<li><a href="#" id="' + termid + '"><h3>' + term + '</h3></a></li>');
  125.                 $('#list_terms').listview('refresh');
  126.             });
  127.         },
  128.         failure: function (msg) {alert(msg);}
  129.     });
  130. }
  131. </script>
  132. </head>

  134. <body>
  135. <div data-role="page" id="terms">
  136. <header>
  137. <a href="index.html"><img src="/mobile/images/header.png" width="310" height="85"></a>
  138. </header>
  139.     
  140.     <div data-role="header">
  141.     <a href="index.html" data-role="button" data-mini="true" data-icon="back">Back</a>
  142. <h4>Select Term</h4>
  143. </div>
  144.     
  145. <section data-role="content">
  146. <div class="content-primary">
  147.             <ul data-role="listview" id="list_terms"></ul>
  148.         </div>
  149. </section>
  151.     <div data-role="footer"></div>
  152. <footer data-role="navbar">
  153.     <ul>
  154.   <li><a href="http://m.facebook.com/miracostacc"><img src="/images/icon_facebook.gif" width="24" height="24"></a></li>      
  155.             <li><a href="http://m.flickr.com/photos/miracosta_college/sets/"><img src="/images/icon_flickr.gif" width="24" height="24"></a></li>
  156.             <li><a href="https://mobile.twitter.com/miracosta"><img src="/images/icon_twitter.gif" width="24" height="24"></a></li>
  157.             <li><a href="http://m.youtube.com/user/miracostacc"><img src="/images/icon_youtube.gif" width="24" height="24"></a></li>
  158.             <li><a href="/mobile/moreoptions.html" data-rel="dialog"><img src="images/icon_more.png" width="24" height="24"></a></li>
  159.         </ul>
  160. </footer>
  161. </div>

  163. <div data-role="page" id="disciplines">
  164. <header>
  165. <a href="index.html"><img src="/mobile/images/header.png" width="310" height="85"></a>
  166. </header>
  167.     
  168.     <div data-role="header">
  169.     <a href="#terms" data-role="button" data-mini="true" data-icon="back">Back</a>
  170. <h4>Disciplines</h4>
  171. </div>
  172.     
  173. <section data-role="content">
  174. <div class="content-primary">
  175.             <ul data-role="listview" id="list_disciplines" data-autodividers="true">
  176.                 <li><a href="#" id="ACCT"><h3>Accounting</h3></a></li>
  177.                 <li><a href="#" id="ADM"><h3>Administration of Justice</h3></a></li>
  178.                 <li><a href="#" id="ACE"><h3>American College English</h3></a></li>
  179. <li><a href="#" id="ANTH"><h3>Anthropology</h3></a></li>
  180. <li><a href="#" id="ARCH"><h3>Architecture</h3></a></li>
  181. <li><a href="#" id="ART"><h3>Art</h3></a></li>
  182. <li><a href="#" id="ASIA"><h3>Asian Studies</h3></a></li>
  183. <li><a href="#" id="ASTR"><h3>Astronomy</h3></a></li>
  184. <li><a href="#" id="ATHL"><h3>Athletics</h3></a></li>
  185. <li><a href="#" id="AUTO"><h3>Automotive Technology</h3></a></li>
  186. <li><a href="#" id="BIO"><h3>Biological Sciences</h3></a></li>
  187. <li><a href="#" id="BTEC"><h3>Biotechnology</h3></a></li>
  188. <li><a href="#" id="BUS"><h3>Business Administration</h3></a></li>
  189. <li><a href="#" id="BOT"><h3>Business Office Technology</h3></a></li>
  190. <li><a href="#" id="CRLP"><h3>Career and Life Planning</h3></a></li>
  191. <li><a href="#" id="CHEM"><h3>Chemistry</h3></a></li>
  192. <li><a href="#" id="CHLD"><h3>Child Development</h3></a></li>
  193. <li><a href="#" id="CISGT"><h3>CIS GT</h3></a></li>
  194. <li><a href="#" id="COMM"><h3>Communication</h3></a></li>
  195. <li><a href="#" id="CIS"><h3>Computer &amp; Information Science</h3></a></li>
  196. <li><a href="#" id="CS"><h3>Computer Science</h3></a></li>
  197. <li><a href="#" id="CSIT"><h3>Computer Studies &amp; Info Tech</h3></a></li>
  198. <li><a href="#" id="COUN"><h3>Counseling</h3></a></li>
  199. <li><a href="#" id="DNCE"><h3>Dance</h3></a></li>
  200. <li><a href="#" id="DESN"><h3>Design</h3></a></li>
  201. <li><a href="#" id="DRAF"><h3>Design Drafting Technology</h3></a></li>
  202. <li><a href="#" id="DRAM"><h3>Dramatic Arts</h3></a></li>
  203. <li><a href="#" id="EART"><h3>Earth Sciences</h3></a></li>
  204. <li><a href="#" id="ECON"><h3>Economics</h3></a></li>
  205. <li><a href="#" id="EDUC"><h3>Education</h3></a></li>
  206. <li><a href="#" id="ETEC"><h3>Energy Technology</h3></a></li>
  207. <li><a href="#" id="ENGR"><h3>Engineering</h3></a></li>
  208. <li><a href="#" id="ENGL"><h3>English</h3></a></li>
  209. <li><a href="#" id="ESL"><h3>English as a Second Language</h3></a></li>
  210. <li><a href="#" id="FILM"><h3>Film</h3></a></li>
  211. <li><a href="#" id="FREN"><h3>French</h3></a></li>
  212. <li><a href="#" id="GEOG"><h3>Geography</h3></a></li>
  213. <li><a href="#" id="GEOL"><h3>Geology</h3></a></li>
  214. <li><a href="#" id="GRMN"><h3>German</h3></a></li>
  215. <li><a href="#" id="GERO"><h3>Gerontology</h3></a></li>
  216. <li><a href="#" id="HEAL"><h3>Health Education</h3></a></li>
  217. <li><a href="#" id="HIST"><h3>History</h3></a></li>
  218. <li><a href="#" id="HORT"><h3>Horticulture</h3></a></li>
  219. <li><a href="#" id="HOSP"><h3>Hospitality</h3></a></li>
  220. <li><a href="#" id="HUMN"><h3>Humanities</h3></a></li>
  221. <li><a href="#" id="INTR"><h3>Interdisciplinary Studies</h3></a></li>
  222. <li><a href="#" id="ITAL"><h3>Italian</h3></a></li>
  223. <li><a href="#" id="JAPN"><h3>Japanese</h3></a></li>
  224. <li><a href="#" id="KINE"><h3>Kinesiology</h3></a></li>
  225. <li><a href="#" id="LRNS"><h3>Learning Skills</h3></a></li>
  226. <li><a href="#" id="LIBR"><h3>Library</h3></a></li>
  227. <li><a href="#" id="LING"><h3>Linguistics</h3></a></li>
  228. <li><a href="#" id="LIT"><h3>Literature</h3></a></li>
  229. <li><a href="#" id="MATH"><h3>Mathematics</h3></a></li>
  230. <li><a href="#" id="MAT"><h3>Media Arts and Technologies</h3></a></li>
  231. <li><a href="#" id="MAP"><h3>Medical Admin Professional</h3></a></li>
  232. <li><a href="#" id="MUS"><h3>Music</h3></a></li>
  233. <li><a href="#" id="MTEC"><h3>Music Technology</h3></a></li>
  234. <li><a href="#" id="NURS"><h3>Nursing</h3></a></li>
  235. <li><a href="#" id="NUTR"><h3>Nutrition</h3></a></li>
  236. <li><a href="#" id="OCEA"><h3>Oceanography</h3></a></li>
  237. <li><a href="#" id="PHAR"><h3>Pharmacology</h3></a></li>
  238. <li><a href="#" id="PHIL"><h3>Philosophy &amp; Religious Studies</h3></a></li>
  239. <li><a href="#" id="PHLB"><h3>Phlebotomy</h3></a></li>
  240. <li><a href="#" id="PHSE"><h3>Physical Education</h3></a></li>
  241. <li><a href="#" id="PHSN"><h3>Physical Science</h3></a></li>
  242. <li><a href="#" id="PHTH"><h3>Physical Therapy</h3></a></li>
  243. <li><a href="#" id="PHYS"><h3>Physics</h3></a></li>
  244. <li><a href="#" id="PLSC"><h3>Political Science</h3></a></li>
  245. <li><a href="#" id="PSYC"><h3>Psychology</h3></a></li>
  246. <li><a href="#" id="READ"><h3>Reading</h3></a></li>
  247. <li><a href="#" id="REAL"><h3>Real Estate</h3></a></li>
  248. <li><a href="#" id="SOC"><h3>Sociology</h3></a></li>
  249. <li><a href="#" id="SPAN"><h3>Spanish</h3></a></li>
  250. <li><a href="#" id="SURG"><h3>Surgical Technology</h3></a></li>
  251. <li><a href="#" id="TA"><h3>Theatre Arts</h3></a></li>
  252. <li><a href="#" id="WKEX"><h3>Work Experience Education</h3></a></li>
  253.             </ul>
  254.         </div>
  255. </section>
  257.     <div data-role="footer"></div>
  258. <footer data-role="navbar">
  259.     <ul>
  260.   <li><a href="http://m.facebook.com/miracostacc"><img src="/images/icon_facebook.gif" width="24" height="24"></a></li>      
  261.             <li><a href="http://m.flickr.com/photos/miracosta_college/sets/"><img src="/images/icon_flickr.gif" width="24" height="24"></a></li>
  262.             <li><a href="https://mobile.twitter.com/miracosta"><img src="/images/icon_twitter.gif" width="24" height="24"></a></li>
  263.             <li><a href="http://m.youtube.com/user/miracostacc"><img src="/images/icon_youtube.gif" width="24" height="24"></a></li>
  264.             <li><a href="/mobile/moreoptions.html" data-rel="dialog"><img src="images/icon_more.png" width="24" height="24"></a></li>
  265.         </ul>
  266. </footer>
  267. </div>

  269. <div data-role="page" id="courses">
  270. <header>
  271. <a href="index.html"><img src="/mobile/images/header.png" width="310" height="85"></a>
  272. </header>
  273.     
  274.     <div data-role="header">
  275.     <a href="#disciplines" data-role="button" data-mini="true" data-icon="back">Back</a>
  276. <h4>Courses</h4>
  277. </div>
  278.     
  279. <section data-role="content">
  280. <div class="content-primary">
  281.             <ul data-role="listview" id="list_courses"></ul>
  282.         </div>
  283. </section>
  285.     <div data-role="footer"></div>
  286. <footer data-role="navbar">
  287.     <ul>
  288.   <li><a href="http://m.facebook.com/miracostacc"><img src="/images/icon_facebook.gif" width="24" height="24"></a></li>      
  289.             <li><a href="http://m.flickr.com/photos/miracosta_college/sets/"><img src="/images/icon_flickr.gif" width="24" height="24"></a></li>
  290.             <li><a href="https://mobile.twitter.com/miracosta"><img src="/images/icon_twitter.gif" width="24" height="24"></a></li>
  291.             <li><a href="http://m.youtube.com/user/miracostacc"><img src="/images/icon_youtube.gif" width="24" height="24"></a></li>
  292.             <li><a href="/mobile/moreoptions.html" data-rel="dialog"><img src="images/icon_more.png" width="24" height="24"></a></li>
  293.         </ul>
  294. </footer>
  295. </div>

  297. </body>
  298. </html>