Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handle get forms in addition to links #272

Open
grosser opened this Issue Apr 29, 2017 · 4 comments

Comments

Projects
None yet
5 participants
@grosser
Copy link

grosser commented Apr 29, 2017

would be nice to have a standardized solution for get forms ... atm using this to make all get forms use turbolinks

// https://github.com/turbolinks/turbolinks/issues/272
// support remote get forms ... since turbolinks fails to do this properly
$(document).on('submit', 'form[method=get][data-remote=false]', function(e) {
  e.preventDefault();
  var form = $(this);
  Turbolinks.visit(form.attr("action") + form.serialize());
});

@grosser grosser changed the title form with method get does not update the page handle get forms in addition to links May 6, 2017

@stefatkins

This comment has been minimized.

Copy link

stefatkins commented Aug 15, 2017

My solution in es6 and without jQuery

for(let i = 0; i < document.forms.length; i++) {
    const form = document.forms[i]
    if (form.method == "get" && form.dataset['remote'] == "true") {
      form.addEventListener("submit", (e) => {
        e.preventDefault();
        const entries = [...new FormData(e.target).entries()]
        const params = "?" + entries.map(e => e.map(encodeURIComponent).join('=')).join('&')
        Turbolinks.visit(form.action + params);
      });
    };
  };
@fadec

This comment has been minimized.

Copy link

fadec commented Mar 12, 2018

I tried stefan694's solution but it hits the server twice.

But this works.

e.preventDefault()
e.stopImmediatePropagation()

Yet simply

e.stopImmediatePropagation()

alone causes a page reload (bypasses turbolinks)

It really would be nice to have the framework take care of this. It's a pretty standard way to handle a search form I think.

@thelucid

This comment has been minimized.

Copy link

thelucid commented Feb 20, 2019

Any better workarounds for this in the core yet?

@thelucid

This comment has been minimized.

Copy link

thelucid commented Feb 20, 2019

Right, for anyone who comes across this and needs to achieve the same with the latest Rails UJS (vanilla js version), I ended up with quite a clean solution after some digging:

import Turbolinks from 'turbolinks';

document.addEventListener('turbolinks:load', function(event) {
  for (let form of document.querySelectorAll('form[method=get][remote=true]')) {
    form.addEventListener('ajax:beforeSend', function (event) {
      const detail = event.detail,
            xhr = detail[0], options = detail[1];

      Turbolinks.visit(options.url);
      event.preventDefault();
    });
  }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.