CODEWITHSUNDEEP
ruby-on-railsturbolinks
John Davis
John Davis

Reputation: 172

Turbolinks won't let me submit form without reloading page

I am using bootstrap 3 with turbolinks and the problem is, when I press on Submit button in my edit form nothing happens, but if I reload page every input submits just fine. I don't understand why this happens, I'm not even using javascript in my form. Here is the code:

<div class = "row">
  <%= semantic_form_for @post do |f| %>
  <%= f.semantic_errors %>
  <div class = "form-group">
    <div class = "col-lg-9 col-md-7">   
      <%= f.input :title, :label => "Title" %>
      <%= f.input :content, :as => :rich, :allow_embeds => true %>
      <%= f.input :cat_list, :label => "Type your tags here" %>
    </div>
  <div class = "col-lg-3 col-md-4 ">
      <p>
      <%= image_tag(@post.thumbnail.url(:original), :class => "img-thumbnail") %>
      </p>
      <p>
      <%= f.input :thumbnail, as: :file %>
      </p>
      <p>
      <%= f.select :tag_list, Post::Tags, { }, { :multiple => true, :size => 10, :class => "form-control" } %>
      </p>
    </div>
  <%= f.action :submit, :as => :button, :button_html => { :class => "btn btn-primary" } %>
</div>
  <% end %>
<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>

This is the content of my application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

Upvotes: 5

Views: 6597

Answers (3)

stevec
stevec

Reputation: 52218

I fixed this by using data: { turbolinks: false } in the page that links to the page with the form, like so:

<%= link_to "Get in Touch", 'contact', data: { turbolinks: false } %>

Now the form works perfectly every time (without any page reload)

Upvotes: 1

TaylorT
TaylorT

Reputation: 208

I had a similar problem: whenever arriving at a page using link_to, I had to refresh.

Add data-no-turbolink="true" inside your view's body tag.

Was solved by looking at Form Submit button only works after reload.

Upvotes: 2

rav
rav

Reputation: 753

my experience with turbolinks is that it's much better to always add a listener to the submit form button like:

$('document').on 'click', '.submit-btn', ->
    $('form').submit()

the reason is because some JS/UJS have conflicts with turbolinks specially the one's with $('document').ready() function because turbolinks does not refreshes the JS in the head, it only replaces the body.

if you have $('document').ready, you could replace it with turbolinks custom listeners (there are several others)

$(document).on('page:load', ready)

Upvotes: 1

Related Questions