Rails Edit action not updating and not work properly using Ajax

问题

I am trying to do two things:

1. With Ajax render Edit form when a user clicks on Edit link/button
2. Then after editing and they click on Update link/button, hide the form.

...but unfortunately, it didn't behave that way. It perfectly renders the form through Ajax but...

1. it renders the form on all of the rows.
2. after edit and you click update it doesn't hide the form.

Below is the code:

controller

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>

This is the image - it renders on all ids

回答1:

I give it all/dedicate it to @bkunzi01's comment under the post to the problem/question and that is what helped me solved it. So this is how I eventually solved it:

Error 1:

So according to what was suggested as I mentioned earlier, I had to redefine my edit.js.erb file to handle unique id of the edit in the row. So my edit.js.erb becomes:

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

Error 2:

I did not create update action with ajax and that made it behaved the way it behaved. So I created a file called update.js.erb to handle what happens when users hit the update button. So my update.js.erb becomes:

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

So this is what I have now shown in the image

Log also shows the right record was updated

This fixed it for me.

来源：https://stackoverflow.com/questions/58117779/rails-edit-action-not-updating-and-not-work-properly-using-ajax