Search code examples
jqueryruby-on-railsturbolinks

rails 4 js only works on page reload


When I reload the page the form works but if I navigate from my app it break the remote: true form. All the other js on my app work fine. I got gem jquery.turbolinks.Please let me know if you need any other information.

show.js

$(".score_box<%= escape_javascript(@inspection_component.id.to_s) %>").html("Puntuación: <%= escape_javascript(@inspection_component.score.to_s) %>");
 $("#<%= escape_javascript(@inspection_component.id.to_s) %>").collapse('hide')

this my index.html.erb

<div class='panel-collapse collapse' id="<%= inspection_component.id%>">
        <div class='panel-body'>
          <div class="field">
            <%= bootstrap_form_for inspection_component, remote:true, :html => {:class => 'form-inline'} do |f| %>
                <div class="form-group">
                  <%= f.select(:score, inspection_component.score_values, { :class => "form-control",label:"Puntuación" }) %>
                </div>
                <div class="form-group">
                  <%= f.submit 'Update', class: "btn btn-success" %>
                  <%= link_to 'Editar', edit_inspection_component_path(inspection_component), {:class=> "btn btn-default"} %>
                  <%= link_to 'Eliminar', inspection_component, {:class=> "btn btn-danger",method: :delete, data: { confirm: 'Are you sure?'}} %>
                </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>

Update Solution

First of all I want to give credit to @Jeff Big, to present the solution to the problem in this post

The solution was that I had a table with the partial for the form and the table tag was missing two very important tags th and tr

That's why my form tag was closing just after the first form tag. Like this:

<form accept-charset="UTF-8" action="/inspection_components/4" class="edit_inspection_component" data-remote="true" id="edit_inspection_component_4" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"></form>

Solution

  • First of all I want to give credit to @Jeff Big, to present the solution to the problem in this post

    The solution was that I had a table with the partial for the form and the table tag was missing two very important tags th and tr

    That's why my form tag was closing just after the first form tag. Like this:

    <form accept-charset="UTF-8" action="/inspection_components/4" class="edit_inspection_component" data-remote="true" id="edit_inspection_component_4" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"></form>