如何在rails中更新Ajax删除记录?

时间:2015-09-22 08:26:27

标签: javascript jquery ruby-on-rails ajax

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%>

vehicle.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来删除车辆名称。它工作正常。

我在这里使用Inline Edit for Best_in_place。更新车辆名称后,ajax警报显示以前的车辆名称。不更新车辆名称。那么如何显示更新的车辆名称警报。

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

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

示例:

  1. 车辆名称:MH P5 2312,我想删除它,警报显示你删除&#34; MH P5 2312&#34;车辆。

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

  3. 提前谢谢。

2 个答案:

答案 0 :(得分:1)

这是因为您需要更新alert message

上的ajax request success 在您的destroy.js.erb

你应该放弃.erb并从html element获取汽车名称

您的js code应如下所示:

$('.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);
});

答案 1 :(得分:0)

首先,如果你要使用ajax:success回调(在这个例子中你没有),你需要将alert函数绑定到它:

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

其次,如果你没有得到更新的@vehicle.name,因为 - 我认为 - 你的Rails实例已经渲染了它。我不确定原因,但关键是通过ajax请求传递您的数据 如果 您仍然会使用它:

#app/controllers/vehicles_controller.rb
class VehiclesController < ApplicationController
   def destroy
        ...
        format.js { render :layout => false, json: @vehicle } 
   end
end 

#app/assets/javascripts/application.js
$('.delete_vehicle').on('ajax:success', function(event, data, status, xhr) {  
    vehicle = JSON.parse(data);
    $(this).closest('tr').fadeOut();
    $(".alert").show().html("Vehicle \"<b>" + + "</b>" deleted successfully.").fadeOut(5000);
});

-

底线是js.erb旨在通过控制器操作为您提供可操作的Javascript功能。我认为您的主要问题是您在此范围内使用ajax,可能会导致冲突。

以上是我如何使用Ajax(IE将代码放在javascript资源文件夹中);如果您仍想使用destroy.js.erb,可以使用以下内容:

#app/views/vehicles/destroy.js.erb
$("<%= @vehicle.id %>").closest('tr').fadeOut();
$(".alert").show();
$(".alert").html("Vehicle \"<b><%=@vehicle.name %></b>\" deleted successfully.")
$(".alert").fadeOut(5000);