I’m kinda following the rails tutorial to learn it and I wanted to learn with turbo.
This is my index.html.erb view:
<%= turbo_include_tags %>
<h1>Notes</h1>
<turbo-frame id="new_note">
<%= form_with(model: Note.new, url: notes_path) do |form| %>
<div>
<%= form.label :content %>
<%= form.text_area :content %>
</div>
<%= form.submit "Create Note" %>
<% end %>
</turbo-frame>
<turbo-frame id="notes">
<div>
<% @notes.each do |note| %>
<div>
<p><span><%= note.id %></span><%= note.content %></p>
<small> <%= note.created_at %> </small>
<%= link_to "Destroy", note_path(note), data: { turbo_method: :delete } %>
</div>
<% end %>
<%= link_to "New note", new_note_path %>
</div>
</turbo-frame>
My _list.html.erb template:
<% notes.each do |note| %>
<div>
<p><span><%= note.id %></span><%= note.content %></p>
<small> <%= note.created_at %> </small>
<%= link_to "Destroy", note_path(note), data: { turbo_method: :delete } %>
</div>
<% end %>
And this is my controller:
def index
@notes = Note.all.order(created_at: :desc)
end
...
def new
@note = Note.new
end
def create
@note = Note.new(note_params)
if @note.save
@notes = Note.all # Reload all notes or fetch them as needed
respond_to do |format|
format.turbo_stream do
render turbo_stream: turbo_stream.replace("notes", partial: "notes/list", locals: { notes: @notes })
end
format.html { redirect_to notes_url } # Fallback in case JavaScript is disabled
end
else
render :new
end
end
...
I want when clicking on the submit button to create a new note and update the list.
I have two issues in my code.
The first one is after the validation the form is not clean. I don’t know the best way to do it.
The second one is to refresh the list.
It works only one time after the first time I click on the submit button. I cannot create a second note without refreshing the page. Another issue is that the new note is added at the end of the list instead of the beginning (because my list is sorted by created_at value).