Why isn't jquery mobile outputting to the console?

Question

Does anyone have a clue why the following code refuses to display the current active page in the console either in Firefox OR Chrome? The code is in the app header, not in any page section, and it comes after all other javascript libraries have been loaded. Also . . . even if the pagecontainer selection were not correct, wouldn't the "This is the page ID: " show up? The browser console is not logging ANYTHING. (By the way, JQuery mobile docs are miserable. They do not explain that "pagecontainer" is implemented on body or document. I had to find that (and the selection code) somewhere else.)

<script type="javascript/text">
    $( document ).ready(function() {
    var pageId = $('body').pagecontainer('getActivePage').prop('id');
    console.log( "This is the page ID:" + pageId );
  });
</script>

deblocker · Answer 1 · 2018-12-27T11:54:28.713

You may need organize your scripts and assets, but if you absolutely need it in the head, you can put it on the mobileinit event before loading jQuery Mobile:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script>
    $(document).ready(function() { $("#events").append("jQuery Dom Ready<br>"); });
    $(document).on('mobileinit', function () {
      function showme(e, ui){
        var activePage = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
        $("#events").append("JQM Event: "+e.type+": "+activePage+"<br>"); 
        if(activePage) {
          $("#events").append("JQM Active Page: "+activePage+"<br>"); 
        } 
        if(e.target){
          if(e.target.id)
            $("#events").append("Target Page: "+e.target.id+"<br>") 
        } 
        if(ui){
          var to = ui.toPage;
          if(ui.prevPage) {
            var fromId = ui.prevPage.prop("id"); 
            if (typeof fromId == "undefined") { 
              $("#events").append("JQM "+e.type+" from -initialization-<br>");
            } else { 
              $("#events").append("JQM "+e.type+" from: " + fromId+"<br>");
            }
          } 
          if (typeof ui.toPage == "object") { 
            $("#events").append("Can manipulate " + ui.toPage.prop("id")+"<br>"); 
          }
        } 
      } 
      $(document).on("pagecreate", function(e, ui) { showme(e, ui); }); 
      $(document).on("pagecontainertransition", function(e, ui) { showme(e, ui); }); 
      $(document).on("pagecontainerbeforechange", function(e, ui) { showme(e, ui); }); 
      $(document).on("pagecontainerbeforeshow",  function(e, ui) { showme(e, ui); }); 
      $(document).on("pagecontainershow", function(e, ui) { showme(e, ui); }); 
      $(document).on("pagecontainerhide", function(e, ui) { showme(e, ui); }); 
    });
  </script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-1">
    <div role="main" class="ui-content">
      <div id="events">
      </div>
    </div>
  </div>
</body>
</html>

Finally, as you complain the lack of documentation, i am giving you some useful links:

If you need some more details about $( document ).ready, here is a great answer from Gajotres updated for the current jQuery Mobile 1.4.5 version:

jQuery Mobile: document ready vs page events

...and here you can find a wonderful graph explaining all the details about JQM page navigation:

jQuery Mobile “Page” Events – What, Why, Where, When & How? from Omar

Finally, here you can find the JQM playground:

Navigate between pages and open and close panel and popup widgets to see which events fire and their data.

Why isn't jquery mobile outputting to the console?

1 Answers1