How to properly redirect to a dynamic page in Jquery Mobile?

Question

I'm running a dynamic page generator in JQM and am struggling to get it to work correctly.

When a user clicks on a link, I intercept the changePage call like this:

  ...
  .on("pagebeforechange", function (e, data) {
    if (typeof data.toPage === "string") {
      init.parsePage(util.parseLink(data.toPage), true);
      e.preventDefault();
    }
  })

which will call my parsePage method, which generates a new page, initializes and appends it to the DOM like so:

  $(document).enhanceWithin();
  $.mobile.initializePage();
  // go to the new page
  $.mobile.changePage("#" + config.id);

My problem is, using e.preventDefault() and a new changePage call will get caught in my pagebeforechange listener again and loop forever. I also tried to not preventing the initial changepage call and just modifying the data.toPage parameters, but assembly of my page takes "too long" and there is no way to delay JQM until the page is assembled.

Question:
How do I trigger a new transition that is not being "caught" by my listener or better, how do I delay the JQM transition until everything is ready (promises would be nice to have here :-)

Thanks!

Answer 1

My current working (not satisfiable) solution:

  // generate dynamic pages
  .on("pagebeforechange", function (e, data) {
    var page;

    if (typeof data.toPage === "string") {
      page = document.getElementById(data.toPage.replace("#",""));

      if (page || data.toPage === $.mobile.getDocumentUrl()) {
        return;
      }
      init.parsePage(util.parseLink(data.toPage), true);
      e.preventDefault();
    }
  })

So I'm checking if the page is in the DOM, because as I'm generating a page dynamically, it will be injected into the DOM before changepaging to it. This way, on first pagebeforechange, the page does not exist, so it will be generated, while on the 2nd turn it will be in the DOM so I return.

Problems with this:

• Going back to the first page will always find a page in the DOM (stop transition when it should not) or trigger generating a new page, when the first page URL is /. Can be solved by comparing data.toPage (e.g. localhost/app/) to $.mobile.getDocumentUrl() (url of the document - remember you always stay in the first DOM you load, hence a documentUrl). This allows to identify the first page.
• pagebeforechange will also trigger on popups being opened, so this must also not trigger a transition. Checking for options.role
• What if data.toPage is a full URL not #foo?