jQM Dialog Failure

HTML

<body>
  <div data-role="page" data-theme="a" id="home">
    <div data-role="header" data-theme="a" align="center">
      <h1>TESTING PAGE</h1>
      <div data-role="navbar" data-iconpos="top">
        <ul>
          <li><a href="#home" data-icon="home">Home</a></li>
          <li><a href="#away" data-icon="grid">Away</a></li>
        </ul>
      </div>
      <!-- /navbar -->
    </div>

    <div data-role="content">
      <p>TESTING PAGE ONE!!</p>

    </div>
    <div data-role="footer" data-theme="a">
      <h3>Copyright</h3>
    </div>
  </div>

  <div data-role="page" data-theme="a" id="away">
    <div data-role="header" data-theme="a" align="center">
      <h1>TESTING PAGE</h1>
      <div data-role="navbar" data-iconpos="top">
        <ul>
          <li><a href="#home" data-icon="home">Home</a></li>
          <li><a href="#away" data-icon="grid">Away</a></li>
        </ul>
      </div>
      <!-- /navbar -->
    </div>

    <div data-role="content">
      <p>TESTING PAGE TWO!!</p>

    </div>
    <div data-role="footer" data-theme="a">
      <h3>Copyright</h3>
    </div>
  </div>



  <div data-role="dialog" id="dialog">
    <div data-role="header" data-theme="d">
      <h1>Dialog</h1>

    </div>
    <div data-role="content">
      <h1>Delete page?</h1>

      <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
      <a href="#" data-role="button" data-rel="back" data-theme="b">Sounds good</a> <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
    </div>
  </div>
</body>

JavaScript

$.mobile.changePage('#dialog', {
  transition: "pop",
  role: "dialog"
});