Need to refresh page everytime I go to a 'new' form - ruby-on-rails

Question

I created a form with client and server side validations using the model and html5 as seen in the code. Everything is working fine, but everytime e click in the link "New Ingredient" and I fill the form below it doesn't work. Moreover, it only works if I refresh the page.
Why it's not working at first?
ingredient.rb
class Ingredient < ActiveRecord::Base
has_many :meal_ingredients
has_many :meals, through: :meal_ingredient
before_save { self.name = name.capitalize }
validates :name, presence: true, length: { minimum: 2, maximum: 25 }, uniqueness: true
validates :unit, presence: true validates :carb, :prot, :fat, numericality: true,
length: { minimum: 1, maximum: 5 }
end
/new.html.erb
<div class = "row">
<div class= "col-md-10 col-md-offset-1 well">
<table class= "table">
<%= form_for #ingredient do |f| %>
<thead>
<tr>
<td>
<%= f.label "Nome" %>
</td>
<td>
<%= f.label "Unidade" %>
</td>
<td>
<%= f.label "Carbo" %>
</td>
<td>
<%= f.label "Prot" %>
</td>
<td>
<%= f.label "Gordura" %>
</td>
<td>
<%= f.label "kcal" %>
</td>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" class="col-md-5">
<%= f.text_field :name, required: true, class: "form-control" %>
</td>
<td class="col-md-3">
<%= f.text_field :unit, required: true, class: "form-control" %>
</td>
<td class="col-md-1">
<%= f.text_field :carb, required: true, :pattern => '^\d+(\.\d+)*$', title: "Apenas números separados por pontos", class: "form-control" %>
</td>
<td class="col-md-1">
<%= f.text_field :prot, required: true, :pattern => '^\d+(\.\d+)*$', title: "Apenas números separados por pontos", class: "form-control" %>
</td>
<td class="col-md-1">
<%= f.text_field :fat, required: true, :pattern => '^\d+(\.\d+)*$', title: "Apenas números separados por pontos", class: "form-control" %>
</td>
<td class="col-md-1">
</td>
</tr>
</tbody>
<tfooter>
<tr>
<td class="pull-right">
<%= f.submit #ingredient.new_record? ? 'Create Ingredient' : 'Edit Ingredient', class: "btn btn-success" %>
</td>
<td>
<%= link_to "Voltar", ingredients_path, class: "btn btn-warning" %>
</td>
</tr>
</tfooter>
<% end %>
</table>
</div>
</div>
/ingredients_controller.rb
def new
#ingredient = Ingredient.new
end
def create
#ingredient = Ingredient.new(ingredient_params)
#ingredient.kcal = #ingredient.carb * 4 + #ingredient.prot * 4 + #ingredient.fat * 9
if #ingredient.save
flash[:success] = "Ingrediente criado com sucesso"
redirect_to ingredients_path
else
render 'new'
end
end

Answer 1

This is probably being caused by Turbolinks, which "speeds" up loading time by refreshing small parts of the DOM without reloading the whole entire page. As such, you'll need to trigger your script with an event that accounts for a partial refresh:
Try wrapping your JS in this:
var ready;
ready = function() {
# Your code here
};
$(document).ready(ready);
$(document).on("page:load", ready);
Here it is in CoffeeScript:
ready = ->
# Your code here
$(document).ready ready
$(document).on "page:load", ready
You can also disable Turbolinks from your "New Ingredient" link, which will cause the entire form page to be reloaded:
<%= link_to('New Ingredient', ..., data: { no_turbolink: true }) %>