CODEWITHSUNDEEP
jquery-mobile
Graham Hannington
Graham Hannington

Reputation: 1957

What is the best way in jQuery Mobile to change to another page (inside the same HTML file) immediately after browsing to a URL?

My jQuery Mobile (1.3.2) website uses parameters in the URL hash value to decide which page (<div data-role="page"> in the single HTML file) to display.

I currently use:

<body onload="myns.initialize()">

where myns.initialize() parses the URL hash value, and then uses $.mobile.changePage() to change to the appropriate ("internal") page:

myns.initialize = function() {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    $.mobile.changePage("#menu", {                  
      transition: "none"                            
    });                                             
  }                                                 
}

This works, but I suspect it's not the best way to do it.

The current default page (the first <div data-role="page"> in the one-and-only HTML file) is one of the possible pages, depending on the parameters in the hash.

The static HTML tags for the default page consist of a header div (containing a title, which for now is common across pages, and some icons, which aren't) and an empty content div (that gets dynamically populated; again, depending on the hash parameters):

<div data-role="page" id="action">                             
  <div data-role="header" data-theme="b" data-position="fixed">
    <a href="#menu"                                            
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="bars"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Actions</a>                        
    <h1>Title</h1>                        
    <a href="#"                                                
      onclick="myns.showInfo()"                                 
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="info"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Information</a>                    
  </div>                                                       
  <div data-role="content" id="content">                       
  </div>                                                       
</div>

If the hash parameters dictate that another page should be displayed instead of this default page, then myns.initialize() changes to that appropriate page.

This works, but it is inelegant. I can sometimes see the header icons (that are specific to the default page) briefly appearing, and then disappearing (if the eventual page does not contain those header icons).

I've tried specifying a new almost-blank default page, like this:

<div data-role="page" id="default-page">                       
  <div data-role="header" data-theme="b" data-position="fixed">
    <h1>Title</h1>                        
  </div>                                                       
  <div data-role="content"/>                                   
</div>

in front of the original default page, but - and here I get an inkling that my current working approach might actually be deeply flawed, and based on a too-shallow understanding - the changePage() calls in myns.initialize() (including a new changePage() call for what used to be the default page) no longer change to the appropriate page. I have confirmed that the changePage() calls occur (by the blunt instrument of temporarily inserting alert() functions before and after those calls), but no page change actually occurs. The almost-blank default page remains. So, for now, pending a better answer, I have fallen back on my working "default page is one of the eventual candidate pages" approach.

I suppose I could dynamically adjust the default page so that it becomes the appropriate page depending on the hash parameters, but I'm hoping for a more straightforward solution. Some of the candidate pages are more-or-less static (well, "pro formas" with variable details that I dynamically inject via script). I'd like to be able to just "go to" those pages (rather than, for example, writing bespoke code that manipulates the DOM to copy the HTML for those pages into the default page).

Added some hours later: I woke up with a hunch about that new default page. Specifically, this empty div element:

<div data-role="content"/>

I changed it to explicitly specify a start tag and an end tag:

<div data-role="content"></div>

That fixed the problem: the changePage() calls in my myns.initialize() now work.

This new almost-blank default page avoids the flickering header icon issue. Still, it's inelegant, and I'd like a better answer.

Upvotes: 0

Views: 1256

Answers (1)

omma2289
omma2289

Reputation: 54619

Try binding to the pagebeforechange event which is the most suited for handling changes in the navigation, you just need to set the value of data.toPage to the page you want to show:

$(document).on("pagebeforechange", myns.initialize);

myns.initialize = function(e, data) {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    data.toPage = $('#menu');                            
  }                                                 
}

Note: If you only need this function on page load you could use one() instead of on() to execute the handler only once

Upvotes: 1

Related Questions