pagebeforeshow event not fired after call to changepage

pagebeforeshow event not fired after call to changepage

Hi there,

I'm just starting out in jQM development and have hit a bit of a brick wall.

In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.

In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).

I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events at all.

Thanks,

Matt

Index.html
  2. <!DOCTYPE HTML>
  3. <html >
  4.    <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  9. <script src="jquery.custom.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <!-- All Items Search -->
  13. <div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
  14. <div data-role="header" class="sixteen columns">
  15. <a href="index.html" data-icon="home" data-direction="reverse">Home</a>
  16. <h1>
  17. <a href="index.html" data-icon="home" data-direction="reverse"> Test </a>
  18. </h1>
  19. </div>

  21. <div data-role="content" style="text-align:center;">
  22. <ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
  23. </ul>
  24. </div><!-- /content -->
  25. <footer>
  26. <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
  27. <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">

  29. </h4>
  30. </div>
  31. </footer>
  32. </div>
  33. </body>
  34.  </html>
 details.html
  2. <!DOCTYPE HTML>
  3. <html >
  4.    <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  9. <script src="jquery.custom.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <!-- All Items Search -->
  13. <div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
  14. <div data-role="header" class="sixteen columns">
  15. <a href="index.html" data-icon="home" data-direction="reverse">Home</a>
  16. <h1>
  17. <a href="index.html" data-icon="home" data-direction="reverse"> Test </a>
  18. </h1>
  19. </div>

  21. <div data-role="content" style="text-align:center;">
  22. <b>Page placeholder</b>
  23. </div><!-- /content -->
  24. <footer>
  25. <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
  26. <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">

  28. </h4>
  29. </div>
  30. </footer>
  31. </div>
  32. </body>
  33.  </html>
 jquery.custom.js (JS Library)
  2. $(document).on("pagebeforechange", function (event, data) {
  3.     alert('changing page...');
  4. });

  6. $(document).on('pageinit', function () {
  7. $("#detailsPage").off();
  8. $("#detailsPage").on("pagebeforeshow", function(event){
  9. alert('about to show page...');
  10. });

  12.     $("#ListItems").off();
  13.     $("#ListItems").on("listviewbeforefilter", function (e, data) {
  14.         var $ul = $(this),
  15. $input = $(data.input),
  16. value = $input.val(),
  17. html = "";
  18.         $ul.html("");

  20.         if (value && value.length > 2) {
  21.             $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
  22.             $ul.listview("refresh");

  24.             var max = 200;
  25.             var limit = 0;

  27. var itemslist = [
  28. {"id":1, "desc":"item1"},
  29. {"id":2, "desc":"item2"},
  30. {"id":3, "desc":"testitm1"},
  31. {"id":4, "desc":"testitm2"}
  32. ];
  34.             $.each(itemslist, function (i, val) {

  36.                 if (limit < max) {
  37.                     if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
  38.                         $ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');

  40.                         $('#' + val.id).off();
  41.                         $('#' + val.id).on('tap', function (event) {
  42.                             var elementId = $(this).attr('id');

  44.                             $.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
  45.                         });

  47.                         limit++;
  48.                     }
  49.                 }

  51.             });

  53.             $ul.listview("refresh");
  54.             $ul.trigger("updatelayout");

  56.         }
  57.     });

  59. });