I'm venturing in Ruby on Rails for a while but never did anything with js. I searched the internet some tutorials but nothing went right to what I wanted.
I have a rails application where in one view I have two partials, one form and another that shows a list of tasks that were created by the form. I want that when the submit button is clicked, the partial list is updated with the new newly created task, while also keeping the others that were created before.
Anyone have a better link to help me? Or a little time to explain to me?
Edit:
with the help of the answers below, I changed my code to:
_to_do_list.html.erb ( with the partial form, it should update the form below, list when pressed the button subit form.)
<%= form_for @todo_list, remote: true do |f| %>
....
<div class="field">
<%= f.label :name%><br />
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description %>
</div>
<div class="field">
<%= f.label 'Público?'%>
<%= f.check_box :is_public %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<div id= "show_list">
<%= render 'show' %>
</div>
And, partial show, not changed, which must be updated:
<table id="list" border="1" >
<tr>
<th>Name</th>
<th>Description</th>
<th>is public?</th>
<th>Add Tasks</th>
<th>erase List</th>
</tr>
<% @todo_lists.each do |f|%>
<tr>
<td><%=f.name %></td>
<td><%=f.description%></td>
<td><%=f.is_public %></td>
<td><%= link_to new_task_path :method => :get %></td>
<td> <%= link_to 'Destroy', f, confirm: 'Are you sure?', method: :delete%></td>
</tr>
<% end %>
</table>
And, new js file :
$("#todos").html('<%=j render partial: "to_do_lists/show", locals: { todo_lists: @todo_list } %>');
Controller:
def create
@todo_list = ToDoList.new(params[:to_do_list])
@todo_list.member_id = current_member.id
respond_to do |format|
if @todo_list.save
format.js{}
format.html { redirect_to @todo_list, notice: 'Lista ' +@todo_list.name+ ' foi criada com sucesso!' }
format.json { render json: @todo_list, status: :created, location: @todo_list }
else
format.html { render action: "new" }
format.json { render json: @todo_list.errors, status: :unprocessable_entity }
end
end
end
The idea is to create a new row in the table with the new task created without leaving the page.
Thank you.
Edit