JQM events and navigation

JQM events and navigation

I have sample site with three pages:

home.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="ISO-8859-1">
  6. <title>Home</title>
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  8. <link rel="stylesheet" href="css/swipe.css"/>
  9. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  10. <script type="text/javascript">
  11. /*
  12. Here is where you would wire in the jqm mobileinit event such as:
  13. $( document ).on( "mobileinit" , function () {
  14. $.mobile.toolbar.prototype.options.addBackBtn = true;
  15. });
  16. */
  17. $( document ).on( "mobileinit" , function () {
  18. });
  19. </script>
  20. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  21. <!-- <script type="text/javascript" src="js/jquery.mobile.event.debugger.js"></script> -->
  22. <script type="text/javascript">
  23. var d=$(document);
  24. var specific=false;
  25. var pbc='pagecontainerbeforecreate';
  26. var pc='pagecontainercreate';
  27. var pbch='pagecontainerbeforechange'
  28. pbc='pagebeforecreate';
  29. pc='pagecreate';
  30. $('a').on('click',function(e){
  31. dumpEvent(e, 'clicked');
  32. });
  33. d.on(pbc, function(e, ui){
  34. dumpEvent(e, 'beforecreate', ui);
  35. }).on(pc, function(e, ui) {
  36. dumpEvent(e, 'create', ui)
  37. }).on(pbch, function(e, ui) {
  38. dumpEvent(e, 'beforechange', ui)
  39. });
  40. $(window).on('navigate', function(e, ui) {
  41. console.log('navigate=%O',ui);
  42. });
  43. d.on(pbc, '[data-url$="/next.html"]', function(e, ui){
  44. dumpEvent(e, 'next beforecreate', ui);
  45. }).on(pc, '[data-url$="/next.html"]', function(e, ui) {
  46. dumpEvent(e, 'next create', ui)
  47. }).on(pbch, '[data-url$="/next.html"]', function(e, ui) {
  48. dumpEvent(e, 'next beforechange', ui)
  49. });
  50. d.on(pbc, '[data-url$="/third.html"]', function(e, ui){
  51. dumpEvent(e, 'third beforecreate', ui);
  52. }).on(pc, '[data-url$="/third.html"]', function(e, ui) {
  53. dumpEvent(e, 'third create', ui)
  54. }).on(pbch, '[data-url$="/third.html"]', function(e, ui) {
  55. dumpEvent(e, 'third beforechange', ui)
  56. });
  57. function dumpEvent(e, msg, ui) {
  58. var prev=null;
  59. var to=null;
  60. if (ui) {
  61. if (ui.prevPage) prev=ui.prevPage[0];
  62. if (ui.toPage) to=ui.toPage[0];
  63. }
  64. console.log('%s fired on %O prev=%O to=%O%s', e.type, (e.target), prev, to, (msg?(" with message "+msg) :''));
  65. }
  66. $(document).ready(function(){
  67. console.log('document ready');
  68. })
  69. </script>
  70. </head>
  71. <body>
  72. <div data-role="page" id="home">
  73. <div data-role="header"><h3>Home</h3></div>
  74. <div role="main" class="ui-content">
  75. Goto the next <a href="next.html">page</a>
  76. </div>
  77. <div data-role="footer">Home</div>
  78. </div>
  79. </body>
  80. </html>

next.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="ISO-8859-1">
  6. <title>Next</title>
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  8. <link rel="stylesheet" href="css/swipe.css"/>
  9. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  11. </head>
  12. <body>

  14. <div data-role="page" id="next">
  15. <div data-role="header"><h3>Next</h3></div>
  16. <div role="main" class="ui-content">
  17. <p>Rather simple page</p>
  18. <p>Goto the last <a href="third.html">page</a></p>
  19. </div>
  20. <div data-role="footer">Next</div>
  21. </div>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24. })
  25. </script>
  26. </body>
  27. </html>

third.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="ISO-8859-1">
  6. <title>Third</title>
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  8. <link rel="stylesheet" href="css/swipe.css"/>
  9. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  11. </head>
  12. <body>

  14. <div data-role="page" id="third">
  15. <div data-role="header"><h3>Third</h3></div>
  16. <div role="main" class="ui-content">
  17. <p>End of the line</p>
  18. </div>
  19. <div data-role="footer">Third</div>
  20. </div>
  21. <script type="text/javascript">
  22. $(document).ready(function(){
  23. })
  24. </script>
  25. </body>
  26. </html>
When home is displayed, i want to create a table and load it via AJAX.  Then clicking on 1 of the rows in the table will link me to next which will also display a table loaded by AJAX (related to the table row clicked in home page).  When I click a row in the next page it will link me to the third page which will load a table using AJAX.  You get the idea. All three pages are external pages.

I wanted to know how to use events to achieve this functionality.  In order to test this I marked up the three pages as above (just a simple link to the next page) and I ran this by going to the home page, then clicking to the next page, then the third and use the browser back arrow twice to take me back to the home.  Here is the console log (annotated with the words "mouse clicked" when I click the links:

  2. pagecontainerbeforechange fired on body.ui-mobile-viewport prev=null to=div#home with message beforechange
  3. pagecontainerbeforechange fired on body.ui-mobile-viewport prev=null to=div#home with message beforechange
  4. pagebeforecreate fired on div#home prev=null to=null with message beforecreate
  5. pagecreate fired on div#home.ui-page.ui-page-theme-a prev=null to=null with message create
  6. document ready
  7. mouse clicked
  8. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#home.ui-page.ui-page-theme-a.ui-page-active to=h with message beforechange
  9. pagebeforecreate fired on div#next prev=null to=null with message next beforecreate
  10. pagebeforecreate fired on div#next prev=null to=null with message beforecreate
  11. pagecreate fired on div#next.ui-page.ui-page-theme-a prev=null to=null with message next create
  12. pagecreate fired on div#next.ui-page.ui-page-theme-a prev=null to=null with message create
  13. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#home.ui-page.ui-page-theme-a.ui-page-active to=div#next.ui-page.ui-page-theme-a with message beforechange
  14. mouse clicked
  15. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#next.ui-page.ui-page-theme-a.ui-page-active to=h with message beforechange
  16. pagebeforecreate fired on div#third prev=null to=null with message third beforecreate
  17. pagebeforecreate fired on div#third prev=null to=null with message beforecreate
  18. pagecreate fired on div#third.ui-page.ui-page-theme-a prev=null to=null with message third create
  19. pagecreate fired on div#third.ui-page.ui-page-theme-a prev=null to=null with message create
  20. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#next.ui-page.ui-page-theme-a.ui-page-active to=div#third.ui-page.ui-page-theme-a with message beforechange
  21. navigate=Object
  22. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#third.ui-page.ui-page-theme-a.ui-page-active to=h with message beforechange
  23. pagebeforecreate fired on div#next prev=null to=null with message next beforecreate
  24. pagebeforecreate fired on div#next prev=null to=null with message beforecreate
  25. pagecreate fired on div#next.ui-page.ui-page-theme-a prev=null to=null with message next create
  26. pagecreate fired on div#next.ui-page.ui-page-theme-a prev=null to=null with message create
  27. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#third.ui-page.ui-page-theme-a.ui-page-active to=div#next.ui-page.ui-page-theme-a with message beforechange
  28. navigate=Object
  29. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#next.ui-page.ui-page-theme-a.ui-page-active to=h with message beforechange
  30. pagecontainerbeforechange fired on body.ui-mobile-viewport.ui-overlay-a prev=div#next.ui-page.ui-page-theme-a.ui-page-active to=div#home.ui-page.ui-page-theme-a with message beforechange
You will see that I created two handlers for each of the following events:

  1. pagebeforecreate
  2. pagecreate
  3. pagecontainerbeforechange
One handler does not have a selector as the second argument to the on method and the other one has a selector for either the next or the third page.

My observations:

The beforecreate (where I would create the table) and the create (where I would add bindings to redirect to the next page) seem to be called:

  1. before displaying the home page
  2. before displaying the next page
  3. before displaying the third page
  4. before navigating back to the next page
However, it is not called before navigating back to the home page.  This means I could not rebuild the home page table (or I do not know how to do this).  Here is my first question:


why are the pagebeforecreate and pagecreate not called when navigating back and how should I detect that ? 

The next observation is that pagecontainerbeforechange event never triggers the second handler to be called (the one with the selector as the second argument in the on method).  Also this event is also called twice.  Once with ui.toPage[0] pointing to an object called h and the second time with ui.toPage[0] pointing to the correct div.

Why does the pagecontainerbeforechange not get called with the second handler?  Why is it called twice and what is this h object? 

All these questions make me think that the whole events things is pretty buggy in JQM 1.4.5 or I do not understand what I am doing (which is possible definitely).

I would appreciate any help anyone can provide as I have been struggling with this for several days.