Changing the initial load page/div in jQuery Mobile

Changing the initial load page/div in jQuery Mobile

We have a page which is heavily data-driven and so users could be navigating to a HTML page which, depending on the user, could potentially see a different landing div (where data-role=div).

Currently, the solution I have worked out so far is as follows (this is a jQuery Mobile/PhoneGap application, hence the deferred bit at the beginning in order to combine the two events into one).

  2. var deviceReadyDeferred = $.Deferred();
  3. var jqmReadyDeferred = $.Deferred();
  5. document.addEventListener("deviceReady", deviceReady, false);
  7. function deviceReady() {
  8. deviceReadyDeferred.resolve();
  9. }
  11. $(document).one("mobileinit", function () {
  12. $.mobile.autoInitializePage = false;
  13. jqmReadyDeferred.resolve();
  14. });
  16. $.when(deviceReadyDeferred, jqmReadyDeferred).then(function() {
  17.             var startDivID = getStartDivID(sessionStorage.getItem("UserID");
  18.             $(startDivID).appendTo("body");
  19.             $.mobile.initializePage();
  20. });

    Thus what this is doing is waiting for both PhoneGap and jQuery to become ready (I use some bits from PhoneGap as part of my initialisation hence the need for both); when both are ready - I get the user's startDivID (based on some code below which you don't have to worry about) and then move it to the first DIV in the <body> and then initialise jQuery Mobile. Is there a better way to do this?

    Thanks
    Kelvin