Действие Edit Rails не обновляется и не работает должным образом при использовании Ajax

Question

Я пытаюсь сделать две вещи :

1. С помощью рендеринга Ajax Редактировать форму, когда пользователь нажимает на ссылку / кнопку Изменить
2. Затем после редактирования иони нажимают на ссылку / кнопку Обновить, скрывают форму.

... но, к сожалению, это не так.Он отлично отображает форму через Ajax, но ...

1. отображает форму во всех строках.
2. после редактирования, и вы нажимаете кнопку обновить, она не скрываетсяформа.

Ниже приведен код:

контроллер

before_action :set_clock_entry, only: [:edit, :update]


def edit
end

def update
    respond_to do |format|
      if @clock_entry.update(clock_entry_params)
        format.js { flash.now[:notice] = 'Clock entry was successfully updated.' }
        format.html { redirect_to @clock_entry, notice: 'Clock entry was successfully updated.' }
        format.json { render :show, status: :ok, location: @clock_entry }
      else
        format.html { render :edit }
        format.json { render json: @clock_entry.errors, status: :unprocessable_entity }
      end
    end
  end

edit.html.erb

<h1>Editing Clock Entry</h1>

<%= render 'form', clock_entry: @clock_entry %>

<%= link_to 'Back', clock_entries_path %>

_form.html.erb

<%= simple_form_for clock_entry, remote: true do |f| %> # I am setting remote: true here
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :purpose %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, class: 'btn btn-primary btn-block btn-lg' %>
  </div>
<% end %>

edit.js.erb

$('#edit-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

html edit link

<tr>
  <td>
    <div id="edit-clock-entry">
      <%= link_to 'Edit', edit_clock_entry_path(clock_entry), remote: true %>
    </div>
  </td>
</tr>

Это изображение - оно рендерится на всех идентификаторах

Answer 1

Я отдаю все это / посвящаю его комментарию @ bkunzi01 под постом к проблеме / вопросу, и это помогло мне решить его.Вот как я в конце концов решил это:

Ошибка 1 :

Итак, в соответствии с тем, что было предложено, как я упоминал ранее, мне пришлось переопределить свой файл edit.js.erbобрабатывать уникальный идентификатор редактирования в строке.Таким образом, мой edit.js.erb становится:

$('#edit-clock-entry-<%= @clock_entry.id %> a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

Ошибка 2 :

Я не создал действие обновления с ajax, и это сделалоон вел себя так, как вел себя.Поэтому я создал файл с именем update.js.erb для обработки того, что происходит, когда пользователи нажимают кнопку обновления.Итак, мой update.js.erb становится:

$('.refresh').bind('ajax:success', function () {
    $(this).hide().parent();
})

Так вот, что я сейчас показал на изображении

Журнал также показывает, что нужная запись была обновлена ​​

Это исправленодля меня.