All geek questions in one place

Rails turbolinks break submit remote form

I have a rather strange problem using Rails 4, Turbolinks and remote form. I have a form similar to:

<%= form_for [object], remote: true do |f| %> <td><%= f.text_field :name, class: 'form-control' %></td> <td><%= f.email_field :email, class: 'form-control' %></td> <td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td> <% end %>

This form adds (creates) a new object. However, it does not always work:

  • When I load a page directly using a URL or an update; it works
  • When I navigate from my application to this page; he fails.

When disabling Turbolinks for this link, the page worked fine.

I have two questions:

  • Why is this not working? Is this because remote handlers are not bound to a button due to a problem with jQuery / Turbolinks?
  • How can I get around this problem?

Thanks in advance.

Decision

Thanks to @ rich-peck, the solution was to add a javascript piece that manually submits the form when the button is clicked:

 <%= javascript_tag do %> var id = "#<%= dom_id(f.object) %>"; var inputs = $(id).parent().find('input'); console.log(inputs); $(id).parent().find('button').on('click', function(e) { e.preventDefault(); $(id).append(inputs.clone()); $(id).submit(); }); <% end %>

This code adds javascript to the form table row, gets inputs, attaches them to the identifier, and submits the form. Prevention Default (); prevents the request from being sent twice when the page refreshes and the form actually works.

+1
source share
2 answers

Turbolinks

As already mentioned, the problem with Turbolinks is that it reloads the <body> DOM with an ajax call - this means that JS does not restart, as it is in the head

A typical way to solve this problem is to delegate your JS from document , for example:

 $(document).on("click", "#your_element", function() { //your code here });

Since document will always be present, it will run JS continuously

Remote

With your problem it's a little harder

The problem is that you rely on the JQuery UJS (unobtrusive JavaScript) Rails engine, which is hard to fix on your own

We have never had this problem, and we constantly use Turbolinks, so I assume that the problem may be how you create the form / process the request. This github seemed to recreate the problem, and this is related to the table

Perhaps you could try:

 <%= form_for [object], remote: true do |f| %> <%= f.text_field :name, class: 'form-control' %> <%= f.email_field :email, class: 'form-control' %> <%= f.submit button_name, class: 'btn btn-sm btn-primary' %> <% end %>
+5
source

Turbolinks does not completely reload your page, but only part of it. This is what makes them so fast, however, if you have JavaScript requiring a full page reload, you will have problems. The reason it works with the update is because now you force the page to reload.

Edit: this stone might be worth a try: https://github.com/kossnocorp/jquery.turbolinks

For a little additional information about the internal work of turboprops: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Or: https://github.com/rails/turbolinks

Ps Also make sure javascript_include_tag is in the main tag (and not in the body)

+4
source

Source: https://habr.com/ru/post/1207456/

More articles:


All Articles