Update notes in div

app/views/meals/_edit_notes_form.html.erb

@@ -0,0 +1,13 @@
+<%= labelled_form_for @meal,
+  url: update_notes_meal_path(@meal),
+  remote: true,
+  html: {id: 'edit-meal-notes-form', name: 'edit-meal-notes-form'} do |f| %>
+
+  <%= link_to l(:button_save), '', class: 'icon icon-save',
+    onclick: "$(event.target).closest('form').submit(); return false;" %>
+  <%= f.text_field :notes, rows: 1, required: false, label: '' %>
+  <%= link_to l(:button_cancel), '',
+    onclick: "$(event.target).closest('form').remove();
+              $('div[id=notes-#{@meal.id}]').contents().show();
+              return false;" %>
+<% end %>

app/views/meals/_show.html.erb

@@ -4,16 +4,16 @@
     <% if m.eaten_at %>
       <%= " at #{m.eaten_at.strftime('%R')}" %>
       <%= link_to '', toggle_eaten_meal_path(m),
-        {remote: true, method: :post, class: "icon icon-close"} %>
+        {remote: true, method: :post, class: "icon icon-close",
+         style: "margin-left: -0.2em;"} %>
     <% else %>
       <%= link_to l(:button_eat), toggle_eaten_meal_path(m),
         {remote: true, method: :post, class: "icon icon-ok"} %>
     <% end %>
-    <%= link_to l(:button_note), note_meal_path(m),
-      {remote: true, class: "icon icon-wiki-page"} %>
-    <div style="float: right; position: relative;">
-      <%= meal_links(m) %>
+    <div id="notes-<%= m.id %>" style="display: inline-flex;">&emsp;
+      <%= display_notes(m) %>
     </div>
+    <div style="float: right; position: relative;"><%= meal_links(m) %></div>
   </td>
 </tr>
 

app/views/meals/edit_notes.js.erb

@@ -0,0 +1,4 @@
+var box = $('div[id=notes-<%= @meal.id %>]');
+box.contents().hide();
+box.append('<%= j render partial: 'meals/edit_notes_form' %>');
+box.find('input[type=text]').focus();

app/views/meals/update_notes.js.erb

@@ -0,0 +1,2 @@
+var box = $('div[id=notes-<%= @meal.id %>]');
+box.html('<%= j display_notes(@meal) %>');