suggestion for turboforms

[moomerman]

I've got an implementation of turboforms working which hijacks all 'normal' forms on the page and sends then asynchronously, replacing the body with the result. This example is rails-specific but could be made generic:

extractUrlTitleAndBody = (content) ->
  doc = createDocument content
  url = doc.querySelector('meta[name=currentPath]').getAttribute('content')
  title = doc.querySelector 'title'
  [ url, title?.textContent, doc.body ]

setContent = (url, title, body) ->
  cacheCurrentPage()
  reflectNewUrl url
  changePage title, body

turboforms = () ->
  $('form:not([data-remote]),a[data-turboform]').each (index, el) =>
    el = $(el)
    el.attr('data-remote', 'true')
    el.bind 'ajax:beforeSend', (event, data, status, xhr) =>
      triggerEvent 'page:fetch'
    el.bind '[RemoteForm] ajax:success', (event, data, status, xhr) =>
      setContent extractUrlTitleAndBody(xhr.responseText)...
      triggerEvent 'page:load'

It raises two questions

1. is turboforms something people want?
2. this could be made as an extension to turbolinks (this is kind of how I'm hooking into it). The turbolinks api doesn't really allow for this at present but could easily be exposed to allow for extensions like this

[dhh]

Let's start with having this be an external concern. I think most people using turbolinks would have ajax forms anyway, so it's not as important of a concern as the links themselves. But do start a separate turboforms project that depends on turbolinks. If you have any specific recommendations on how the turbolinks api could be made better for something like turboforms, let us know.

[fklingler]

What is the actual easiest way to do so that when we submit a form, the page is not completely reloaded (like with internal links in turbolinks) ?

[moomerman]

@fklingler I'm away for the weekend but will try and put something together mon/tue next week

[benbonnet]

Happy to hear about this form 'issue'. On a new project, I don't feel like it is that external.
I've been surprised not to see it working out-of-the-box on forms
At first I felt like turbo links was about making your site fully ajaxified, which is not the case when forms aren't considered

[johnnyshields]

I think most people using turbolinks would have ajax forms anyway

@dhh turbolinks is precisely the reason I'd want to not have ajax forms--because turbolinks should do it for me!

👍 +1 to re-opening this.

[dhh]

The point with ajax forms is often to trigger custom JS on their submission, though. Hide this, show that. Those choices can't be automated.

[johnnyshields]

Agreed that it should not be the default. In @timurvafin's fs/turboform gem, he requires to add a turboform: true attribute to the form to enable the functionality. This would be quite useful.

[dhh]

Love to have extensions to this, but at this time I'm not thinking it's a fit for core.

[johnnyshields]

Fair enough, thanks for the reply 🍻

[jeremyhaile]

@moomerman - did you turn your extension into a gem yet? What's the status?

[moomerman]

@jeremyhaile haven't released anything yet I'm afraid, I had to make changes to my version of Turbolinks to support my extension and didn't get round to submitting that as a suggestion as I wasn't that happy with the changes I made, I just 'got it working'.

[amnesia7]

Is it not just a case of something like the following that I'm currently using in a helper.js file included in application.js and applying data-turbolinks-form attribute to forms that I want it to work with:

$(document).on('submit', 'form[data-turbolinks-form]', function(e) {
  var options = {};
  Turbolinks.visit(
    this.action + (this.action.indexOf('?') === -1 ? '?' : '&') + $(this).serialize(),
    options
  );
  return false;
});

This could be extended to check for a data-turbolinks-change attribute on the form to just update a part of the page (v3-specific) or maybe any other options that could be passed in to .visit()