CODEWITHSUNDEEP
javascripthyperlinksingle-page-applicationturbolinksturbolinks-5
Matteo Tassinari
Matteo Tassinari

Reputation: 18584

Turbolinks always loading the page as usual

I was testing to see if Turbolinks could help our web application look a little faster, behaving "almost like" a single page application.

Since we already have a kind of "master hook" on all click on all links, I set data-turbolinks="false" on the <body> and then changed our click handler to call Turbolinks:

function goToUrl(url) {
  // some controls here, and then ...

  Turbolinks.visit(url);
}

I also disabled caching and set the root to /:

<meta name=\"turbolinks-cache-control\" content=\"no-cache\">
<meta name=\"turbolinks-root\" content=\"/\">

However, I have noticed that it always performs a standard page change, instead of its "magic".

The same happens if I call the method from the console, no errors or warnings are shown, but the page loads normally, instead of using Turbolinks "magic".

The only time it works, is when visiting the root address ("/").

Is there some more configuration involved, than simply using the visit() method?

EDIT:

After further testing, I noticed that, when the call to Turbolinks.visit(url) seems to "fail", by issueing a normal page navigation instead, it returns an object like that when logged is like this:

Object {
  absoluteURL: "URL WHERE I TRIED TO NAVIGATE",
  requestURL: "SAME AS ABOVE"
}

When I test the only address which is loaded correctly, I get a different object instead:

turbolinks:visit {
  target: HTMLDocument → /,
  isTrusted: false,
  eventPhase: 0,
  bubbles: true,
  cancelable: false,
  defaultPrevented: false,
  composed: false,
  timeStamp: 1492781909168000,
  cancelBubble: false,
  originalTarget: HTMLDocument → /,
  explicitOriginalTarget: HTMLDocument → /
}

In the first case, it seems like a plain object, while the second looks more like an event instead; however this does not help in identify the issue which causes it not to work properly.

Upvotes: 1

Views: 200

Answers (1)

Matteo Tassinari
Matteo Tassinari

Reputation: 18584

In the end I found out the reason was that all our links were to PHP files, like for example /folder/index.php?p=1&x=2, and Turbolinks has a check for which, if the link has an extension, it must be one of htm, html or xhtml.

So I tried overriding that function with another one, like this:

Turbolinks.Location.prototype.isHTML = function() {
    return this.getExtension().match(/^(?:|\.(?:htm|html|xhtml|php))$/);
};

After doing so it started working as expected.

Upvotes: 5

Related Questions