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

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

  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

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

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

Изображение


person Afolabi Olaoluwa Akinwumi    schedule 26.09.2019    source источник
comment
edit-clock-entry не должен быть идентификатором, поскольку он не будет уникальным для каждой строки. Вы должны сделать так, чтобы идентификатор был уникальным для каждой строки, например: ‹div id=edit-clock-entry-#{clock_entry.id}› Это, по крайней мере, гарантирует, что будет открываться и закрываться только строка, на которую нажали.   -  person bkunzi01    schedule 26.09.2019


Ответы (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();
})

Вот что я сейчас показал на картинке

изображение

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

изображение журнала

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

person Afolabi Olaoluwa Akinwumi    schedule 26.09.2019