turbo drive works for a form but not a link

Question

I an experimenting with turbo drive without rails.

It seems to work for forms but not links.. even when the form is set to GET.

To try to keep it minimal, I have used bash and cgi, but I saw the same thing using another web framework.

$ mkdir example
$ cd example
$ cat > index.html
<meta http-equiv="Refresh" content="0; url='/cgi-bin/index.sh'" />

$ mkdir cgi-bin
$ cat > cgi-bin/index.sh
#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <h2>$QUERY_STRING</h2>
    <a href="?val=NEW">NEW</a>
    <form action="?">
        <input type="hidden" name="val" value="NEW" />
        <input type="submit" />
    </form>
  </body>
</html>
EOF

$ chmod +x cgi-bin/index.sh
$ npm install --save @hotwired/turbo@7.0.1
$ python3 -m http.server --cgi # or whichever server

then when I go to http://localhost:8000 I get this:

Both the both the link and the submit button load the random number displayed in the link, and prepare a new random number for loading.

The difference is that the link reloads the whole page as if turbo were not included, and the form fetches.

What do I have to do to make it ajax the link as well? Did I overlook an attribute I need in the link or something?

I tagged it rails even though I am not using rails because that's the only available hotwire tag — Alex028502, Oct 07 '21 at 18:59

score 0 · Answer 1 · answered Oct 07 '21 at 19:29

Stepping through the code I discovered this condition:

function isHTML(url) {
    return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml))$/);
}

So I renamed index.sh to index.html and it worked! I guess it probably works with no filename as well.

That restrictions only applies to links, not forms.

turbo drive works for a form but not a link

1 Answers1