Ratchet Push.js Not Pushing

I've build a PHP app on top of CodeIgniter, which works by moving to controller to controller (.php files) instead of from one static page to another (.html files).

Problem: The links refuse to work.

I'm not sure that this is even the problem, But I've gone through the docs and It seems to be the only exception in comparison to the source code - I'm calling a .php file instead of .html file.

Before you ask - on my system, booknav is a viable controller, loading up a viable view upon clicking it.

Also - I can see that the snippet here is actually working. I'm trying to debug this - how come the snippet here sends a link, while the equivalent on my server does not?

Here is my eventual HTML file:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Project</title>
  <!-- Including Ratchet CSS + JS + Custom CSS !-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-status-bar-style" content="black">
  <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.js"></script>
</head>

<body>
  <header class="bar bar-nav">
    <h1 class="title">Select Your Book</h1>
  </header>
  <div class="content">
    <div class="card">
      <ul class="table-view">
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 1</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 2</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 3</strong></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Solution

If you click the link and the browser navigates to http://yourwebserver/projectroot/booknav rather than swapping page content with a transition animation, its because you're not emulating a device in your browser. push.js isn't triggered because the touchend event isn't fired. Use the chrome developer tools, or install ripple.

ratchet adds a handler for window touchend events, intercepts navigation and loads the entire target page separately from the DOM, and then swaps the new contents with the content containers on the dom.

Some general requirements for running ratchet.js

1) to be testing the app running within a web server or deployed to a device.
2) you must use an emulator to trigger the touch events (or run on a device)
3) The page content needs to be well formatted. It should have matching header, footer, nav, content elements on each page. There should be no missing data-transition tags on your links.

You can trigger touch events in chrome by enabling the developer tools and enabling device emulation, or with a library like the hammer.js touch emulator. If you trigger a click, you will bypass push.js and the browser will navigate which isn't what you want.

If the content isn't well formatted, the browser will reload the page for whatever the current location is, which isn't what you want.