Adding an item to a list using ajax and rails - ruby-on-rails

Question

So, I have a Ruby on Rails application where the user have a list of ingredients. When the user adds a new item to the list of ingredients I need to refresh the page so the ingredient are shown in the list. I want this to be done dynamically using Ajax, I looked up to the internet for solutions but none worked :/
Here is my HTML code(index.html.erb):
<%= form_for(:ingredientList, :url => {:controller => 'ingredients', :action => 'index'}, :remote => true) do |f| %>
<div class ="modal-text col-md-6">
<div class="model-subtitle">Ingrediente: </div>
<%= f.select :value, options_for_select(#ingredient.map{ |ing| [ing.name, ing.id]}, html_options = { class: 'form-control', required: true })%>
</div>
<div class="modal-text col-md-6">
<div class="model-subtitle">Quantidade: </div>
<%= f.text_field :quantity, class: 'form-control', placeholder: "quantidade", autofocus: true %>
</div>
<%= f.submit :Salvar, class: 'btn btn btn-success center-block'%>
My controller:
def index
#user = User.find_by id: session[:user_id]
#ingredients = Ingredient.joins(:ingredients_users).where("user_id = ?", session[:user_id]).select("*")
#user_id = session[:user_id]
#ingredient = Ingredient.all
respond_to do |format|
format.js
format.html
if params[:ingredientList]
#userIngredient = IngredientsUser.new
#userIngredient.ingredient_id = params[:ingredientList][:value]
#userIngredient.quantity = params[:ingredientList][:quantity]
#userIngredient.user_id = #user.id
if #userIngredient.save
flash[:success] = "Ingredient saved!"
else
#userIngredient.errors.full_messages.each do |error|
flash[:alert] = error
end
end
end
end
end
I don't know if I make something wrong(probably as is not working) or if I forgot to add something. Do any of you know how to solve this?

Answer 1

I say this without knowing what your app/views/ingredients/index.js file looks like, but I think you have it almost correct.
As soon as you call format.js and format.html in your controller, it will go ahead and render the corresponding view (eg: app/views/ingredients/index.js). Any code that comes after format.js and format.html will be executed only AFTER the rendering is complete.
So in your case, what happens is that the rendering is done prior to actually processing the input (initializing the ingredient, trying to save it, ...). Try moving format.js and format.html to the end of the action code:
def index
#user = User.find_by id: session[:user_id]
#ingredients = Ingredient.joins(:ingredients_users).where("user_id = ?", session[:user_id]).select("*")
#user_id = session[:user_id]
#ingredient = Ingredient.all
respond_to do |format|
if params[:ingredientList]
#userIngredient = IngredientsUser.new
#userIngredient.ingredient_id = params[:ingredientList][:value]
#userIngredient.quantity = params[:ingredientList][:quantity]
#userIngredient.user_id = #user.id
if #userIngredient.save
flash[:success] = "Ingredient saved!"
else
#userIngredient.errors.full_messages.each do |error|
flash[:alert] = error
end
end
end
format.js
format.html
end
end
All of that said, you're "violating" the Rails conventions. An index action should primarily be used to get a series of objects. Saving data should be either via the create (if it's a new record) or update action (if it's a change to an existing record).