Question

我正在使用ajax创建图像。

我正在添加像这样的新添加的图像

create.js.erb

$("#photos .row").append("<%= j render(@photo) %>")

_photo.html.erb

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <%= image_tag photo.image_url(:thumb) %>
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <%= link_to listing_photo_path(@listing, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
      <i class="fa fa-times fa-lg"></i>
                <% end %>
          </span>
    </div>
  </div>
</div>

以下是我查看所有内容的视图文件： index.html.erb

<div id="photos">
    <div class="row">
    <%= render @photos %>
    </div>
  </div>

以上所有内容都可以。但是如何使用ajax ???

删除图像

listings_controller.rb

def destroy
    @photo = @listing.photos.find(params[:id])
    @photo_id=@photo.id
    @photo.destroy
 end

destroy.js.erb

所以在破坏中如何删除图像？通过ajax ?? destroy方法目前正在工作，但需要刷新页面才能看到效果。如何抓取已删除的照片并从视图中删除？

更新

<div id="photos">
    <div class="row">

# This will be one image
    <div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <img src="https://testing-dev-1.amazonaws.com/cache/c75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20151217T161738Z&amp;X-Amz-Expires=900&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&amp;x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&amp;x amz date=20151217t161738z&amp;x amz expires=900&amp;x amz signedheaders=host&amp;x amz signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73">
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/listings/1/photos/35">
      <i class="fa fa-times fa-lg"></i>
</a>          </span>
    </div>
  </div>
</div>
# The first image end

# This will be second image
    <div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <img src="https://testing-dev-1.amazonaws.com/cache/c75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20151217T161738Z&amp;X-Amz-Expires=900&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&amp;x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&amp;x amz date=20151217t161738z&amp;x amz expires=900&amp;x amz signedheaders=host&amp;x amz signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73">
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/listings/1/photos/35">
      <i class="fa fa-times fa-lg"></i>
</a>          </span>
    </div>
  </div>
</div>
# The second image end



</div>
      </div>

Answer 1

更新您的_photo.html.erb部分以保留唯一的id，如下所示：

<div class="col-md-4" id="<%= dom_id(photo) %>">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <%= image_tag photo.image_url(:thumb) %>
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <%= link_to listing_photo_path(@listing, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
      <i class="fa fa-times fa-lg"></i>
                <% end %>
          </span>
    </div>
  </div>
</div>

添加id="<%= dom_id(photo) %>"会为每张照片添加唯一的id，然后，您可以从id文件中定位此destroy.js.erb，然后删除来自页面的id。

如何使用rails中的jquery删除特定项目？

1 个答案: