javascript - 如何更新 Rails 中 Ajax 删除的记录？

Question

Vehicles_controller.rb

     class VehiclesController < ApplicationController
  before_action :set_vehicle, only: [:show, :edit, :update, :destroy]
  load_and_authorize_resource

   # skip_before_action :verify_authenticity_token

  # GET /vehicles
  # GET /vehicles.json
  def index
    @q = Vehicle.search(params[:q])
    @vehicles = @q.result(:distinct => true).order_by([:updated_at, :desc]).page(params[:page]).per(5)
    @vehicle = Vehicle.new
  end

  # GET /vehicles/1
  # GET /vehicles/1.json
  def show
  end

  # GET /vehicles/new
  def new

  end

  # GET /vehicles/1/edit
  def edit
  end

  # POST /vehicles
  # POST /vehicles.json
  def create
    params[:vehicle][:name] = params[:vehicle][:name].upcase if !params[:vehicle][:name].nil?
    @vehicle = Vehicle.new(vehicle_params)
    @vehicles = Vehicle.all.order_by([:updated_at, :desc]).page(params[:page]).per(5)
    respond_to do |format|
      if @vehicle.save
        format.html { redirect_to :back, notice: 'Vehicle was successfully created.' }
        format.json { render action: 'index', status: :created, location: @vehicle }
        format.js
      else
        format.js
        format.html { render action: 'new' }
        format.json { render json: @vehicle.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /vehicles/1
  # PATCH/PUT /vehicles/1.json
  def update
        params[:vehicle][:name] = params[:vehicle][:name].upcase if !params[:vehicle][:name].nil?

    respond_to do |format|

      if @vehicle.update(vehicle_params)
        format.html { redirect_to @vehicle, notice: 'Vehicle was successfully updated.' }
        format.json {render json: @vehicle, status: :ok}
      else
        format.html { render action: 'edit' }
        format.json { render json: @vehicle.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /vehicles/1
  # DELETE /vehicles/1.json
  def destroy
    @vehicle.destroy
    respond_to do |format|
      format.html { redirect_to vehicles_url, notice: "#{@vehicle.name} deleted successfully" }
      format.json { head :no_content }
      format.js { render :layout => false}
    end
  end

  def vehicle_search

    @q = Vehicle.search(params[:q])
    @vehicles = @q.result(:distinct  => true).order_by([:updated_at, :desc]).page(params[:page]).per(5)

    respond_to do |format|
      format.html
      format.js
    end
  end
  private
    # Use callbacks to share common setup or constraints between actions.
    def set_vehicle
      @vehicle = Vehicle.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def vehicle_params
      params.require(:vehicle).permit(:name, :created_at, :updated_at)
    end
end

index.html.erb

 <% @vehicles.each do |vehicle| %>
<tr>
    <td><%= best_in_place vehicle,:name, class: "v_name", id: vehicle.id%></td>
    <td><%= link_to '<i class="fa fa-trash-o"></i>'.html_safe, vehicle, method: :delete,  remote: true, data: { confirm: "Are you sure to delete <b>\"#{vehicle.name}\"?</b>", commit: "OK" }, title: "Delete Vehicle", class: "btn btn-danger delete_vehicle" %>

    </td>
</tr>       
<%end%>

车辆.rb

    class Vehicle
  include Mongoid::Document
    include Mongoid::Timestamps

  field :name, type: String
  validates :name, presence: true, uniqueness: true, :format => {:with => /[1-9a-zA-Z][0-9a-zA-Z ]{3,}/}
  has_many :pre_processings
  has_many :batch_counts


end

destroy.js.erb

 $('.delete_vehicle').bind('ajax:success', function() {  
        $(this).closest('tr').fadeOut();
});
$(".alert").show();
$(".alert").html("Vehicle \"<b><%=@vehicle.name %></b>\" deleted successfully.")
$(".alert").fadeOut(5000);

我在这里使用 destroy.js.erb 来删除车辆名称。它工作正常。

我在这里使用内联编辑 Best_in_place。更新车辆名称后，ajax 警报会显示以前的车辆名称。不更新车辆名称。那么如何显示更新的车辆名称警报。

$(".alert").html("Vehicle \"<b><%=@vehicle.name %></b>\" deleted successfully.")

上面的警告我会显示当前要删除的车辆名称。但是，如果我在删除后使用内联编辑进行更新，我将显示以前的记录。

例子:

1. 车辆名称:MH P5 2312，我想删除它，警报显示您删除“MH P5 2312”车辆。

2. 在内联编辑后，我将更改车辆名称:AP 16 1234，所以我想删除车辆名称:AP 16 1234，但 ajax 警报显示，车辆名称:MH P5 2312 删除车辆名称。

提前致谢。

Answer 1

这是因为您需要在 ajax 请求成功时更新警报消息

在你的 destroy.js.erb 中

您应该放弃 .erb 并改为从 html 元素 中获取汽车名称

您的js代码应该如下所示:

$('.delete_vehicle').bind('ajax:success', function() { 
    var vehicleName = $('vehicle_link').data('vehicle_name');
    // here I assume that you have a link for initiating the delete process and you can add an attribute to this anchor tag element called data-vehicle_name and set its value to the car name.
    $(this).closest('tr').fadeOut();
    $(".alert").show();
    $(".alert").html("Vehicle \"<b>" + vehicleName + "</b>\" deleted successfully.");
    $(".alert").fadeOut(5000);
});