文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >ajax“删除”按钮用于rails

问ajax“删除”按钮用于rails
EN

Stack Overflow用户
提问于 2018-08-17 07:08:05
回答 3查看 663关注 0票数 0

我正在尝试得到一个ajax‘删除’按钮来工作。

按钮正在从我的数据库中删除对象，但不更新索引页。因此，在刷新页面之前，已删除的对象仍然存在于索引中。

我认为：

代码语言：javascript
复制
<%= link_to "Delete Fabric", delete_fabric_path(fabric), method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_fabric', class: "btn btn-primary btn-sm"%>

路线：

代码语言：javascript
复制
delete "/fabrics/:id" => "fabrics#destroy", as: 'delete_fabric'
get "/fabrics/collection" => "fabrics#index", as: "index_fabrics"

主计长：

代码语言：javascript
复制
def destroy
  @fabric = Fabric.find(params[:id])
  @fabric.destroy

  respond_to do |format|
    format.html { redirect_to index_fabrics_url }
    format.json { head :no_content }
    format.js { render layout: false }
  end
end

destroy.js.erb：

代码语言：javascript
复制
$('.delete_fabric').bind('ajax:success', function() {
  $(this).closest('tr').fadeOut();
});

如果有人知道我哪里出错了，我会非常感激的！谢谢。

我是我所遵循的教程。

服务器日志：

代码语言：javascript
复制
Started DELETE "/fabrics/46" for 127.0.0.1 at 2018-08-17 15:57:22 +0800
Processing by FabricsController#destroy as JS
  Parameters: {"id"=>"46"}
  Fabric Load (1.4ms)  SELECT  "fabrics".* FROM "fabrics" WHERE "fabrics"."id" = $1 LIMIT $2  [["id", 46], ["LIMIT", 1]]
  ↳ app/controllers/fabrics_controller.rb:70
   (0.4ms)  BEGIN
  ↳ app/controllers/fabrics_controller.rb:71
  Fabric Destroy (0.5ms)  DELETE FROM "fabrics" WHERE "fabrics"."id" = $1  [["id", 46]]
  ↳ app/controllers/fabrics_controller.rb:71
   (6.3ms)  COMMIT
  ↳ app/controllers/fabrics_controller.rb:71
  Rendering fabrics/destroy.js.erb
  Rendered fabrics/destroy.js.erb (9.4ms)
Completed 200 OK in 83ms (Views: 30.4ms | ActiveRecord: 8.6ms)

全貌：

代码语言：javascript
复制
<!-- SHOW FABRIC COLLECTION / FABRIC OPTIONS-->
<div class="card-deck">

    <% @fabrics.each do |fabric| %>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="<%=fabric.image%>">
            <div class="card-body">
              <h5 class="card-title"><%= fabric.fabric_name%></h5>
              <p class="card-text"><%= fabric.fabric_description%></p>
              <p class="card-text"><%= fabric.printed%></p>


<!--               Listing fibre types -->
              <p class="card-text"><small class="text-muted">Composition: 

                        <% fabric.fibre.each do |fibre| %>
                            <%=fibre %>
                        <%end%>
              </small></p>


<!--               Listing colours -->
              <p class="card-text"><small class="text-muted">Colours: 

                        <% fabric.colour.each do |colour| %>
                            <%=colour %>
                        <%end%>
              </small></p>


<!--               Listing suitable for -->
              <p class="card-text"><small class="text-muted">Suitable For: 

                        <% fabric.suitable_for.each do |item| %>
                            <%=item %>
                        <%end%>
              </small></p>

<!--               Show page button -->
      <%= link_to "Full Details", show_fabrics_path(fabric), class: "btn btn-primary btn-sm" %>

<!--              AJAX DELETE BUTTON IN PROGRESS-->

       <%= link_to "Delete Fabric", delete_fabric_path(fabric), method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_fabric'%>

<!--              AJAX DELETE BUTTON -->

            </div>
           </div>
      </div>

    <% end %>

</div>

全面、全面：

代码语言：javascript
复制
<!-- MODEL FOR UPLOAD FABRIC -->


<!-- Button trigger modal -->
</br><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Add Fabric to collection
</button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Fabric</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">



<!-- Form to add fabric -->
<%= form_with scope: :fabrics, url: new_fabrics_path, local: true do |form| %>
    <p>
      <%= form.label :fabric_name %><br>
      <%= form.text_field :fabric_name %>

      <%= form.label :fabric_description %><br>
      <%= form.text_field :fabric_description %>

      <%= form.label :purchased_from %><br>
      <%= form.text_field :purchased_from %>

      <%= form.label :meterage %><br>
      <%= form.select :meterage, (0..500) %>

        <%= form.label :select_fibres %><br>
        <%@fibres.each do |fibre|%>
            <%= form.label fibre %>
            <%= form.check_box :fibre, {multiple: true}, fibre.to_s, nil %></br>
        <% end %>

        <%= form.label :main_fabric_colours %><br>
        <%@colours.each do |colour|%>
            <%= form.label colour %>
            <%= form.check_box :colour, {multiple: true}, colour.to_s, nil %></br>          
        <% end %>

        <%= form.label :suitable_for %><br>
        <%@suitable_for.each do |item|%>
            <%= form.label item %>
            <%= form.check_box :suitable_for, {multiple: true}, item.to_s, nil %></br>      
        <% end %>

        <%= form.label :printed? %><br>
        <%= form.check_box :printed %><br>

      <%= form.submit "Add Fabric" %>
    </p>

<% end %>  
<!-- Form to add fabric -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Fabric</button>
      </div>
    </div>
  </div>
</div></br></br>


<!-- MODEL FOR UPLOAD FABRIC -->

<!-- FILTER BAR -->

<% if @filtered == true %>

    <%= form_with scope: :filter, url: filter_fabrics_path, local: true do |form| %>
        <p>
        <%= form.select(:fibre, ['Silk', 'Linen', 'Cotton', 'Bamboo'], {:prompt => "Fibre Type"}) %>
        <%= form.select(:colour, ['Blue', 'Yellow', 'Purple', 'Green'], {:prompt => "Select Colour"}) %>
        <%= form.select(:suitable_for, ['Pants', 'Skit', 'Shirt', 'Skirt'], {:prompt => "Suitable For"}) %>
        <%= form.submit "Filter Results" %> 
        </p>
    <% end %> 

<% else %> 

    <%= form_with scope: :filter, url: filter_fabrics_path, local: true do |form| %>
        <p>
        <%= form.select(:fibre, ['Silk', 'Linen', 'Cotton', 'Bamboo'], {:prompt => "Fibre Type"})%>
        <%= form.select(:colour, ['Blue', 'Yellow', 'Purple', 'Green'], {:prompt => "Select Colour"})%>
        <%= form.select(:suitable_for, ['Pants', 'Skit', 'Shirt', 'Skirt'], {:prompt => "Suitable For"})%>
        <%= form.submit "Filter Results" %> 
        </p>
    <% end %>   

<% end %> 
<!-- FILTER BAR -->

<!-- DISPLAYS CURRENTLY SELECTED FIELDS IF @FILTERED VIEW -->

<p><% if @filtered == true %>

    <% if @selected_fibre != "Fibre Type" %>
       <%= "Filtering by Fibre: #{@selected_fibre} "%>
    <% end %></br>  

    <% if @selected_colour != "Select Colour" %>
       <%= "Filtering by Colour: #{@selected_colour} "%>
    <% end %></br>  

    <% if @selected_suitable_for != "Suitable For" %>
       <%= "Filtering by Project: #{@selected_suitable_for} "%></p>
    <% end %></p>


 <%= link_to "Clear Filters", index_fabrics_path, class: "btn btn-primary btn-sm" %><br><br>
<% end %>  


<!-- SWITCHES STATEMENT BASED ON FILTERED YES/NO-->
<% if @fabrics.length == 0 %>
    <h4> NO SEARCH RESULTS (PROMOTE FABRICS THAT MATCH SEARCH FROM RETAILER) </h4></br>
  <% else %>

    <% if @filtered == true %>
        <h4> OPTIONS FOR YOUR SEWING PROJECT</h4></br>
      <% else %>
        <h4> YOUR FABRIC COLLECTION</h4></br>
    <% end %>

<% end %>


<!-- SHOW FABRIC COLLECTION / FABRIC OPTIONS-->
<div class="card-deck">

    <% @fabrics.each do |fabric| %>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="<%=fabric.image%>">
            <div class="card-body">
              <h5 class="card-title"><%= fabric.fabric_name%></h5>
              <p class="card-text"><%= fabric.fabric_description%></p>
              <p class="card-text"><%= fabric.printed%></p>


<!--               Listing fibre types -->
              <p class="card-text"><small class="text-muted">Composition: 

                        <% fabric.fibre.each do |fibre| %>
                            <%=fibre %>
                        <%end%>
              </small></p>


<!--               Listing colours -->
              <p class="card-text"><small class="text-muted">Colours: 

                        <% fabric.colour.each do |colour| %>
                            <%=colour %>
                        <%end%>
              </small></p>


<!--               Listing suitable for -->
              <p class="card-text"><small class="text-muted">Suitable For: 

                        <% fabric.suitable_for.each do |item| %>
                            <%=item %>
                        <%end%>
              </small></p>

<!--               Show page button -->
      <%= link_to "Full Details", show_fabrics_path(fabric), class: "btn btn-primary btn-sm" %>

<!--              AJAX DELETE BUTTON IN PROGRESS-->

       <%= link_to "Delete Fabric", delete_fabric_path(fabric), method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_fabric'%>

<!--              AJAX DELETE BUTTON -->

            </div>
           </div>
      </div>

    <% end %>

</div>
ruby-on-rails
ajax
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-17 08:04:55

Rolandas解决方案应该可以帮助您解决问题。

在服务器端，删除正在正常进行，您正在呈现正确的部分( destroy.js.erb文件)。

附加调试:在事件侦听器中为console.log($(this).closest('tr'))添加一个ajax success。

您的javascript应该是这样的：

代码语言：javascript
复制
console.log('Binding event');
$('.delete_fabric').bind('ajax:success', function() {
  console.log('fading the element: ', $(this).closest('tr')); 
  $(this).closest('tr').fadeOut();
});
  • 如果您没有在JS控制台中看到日志，这意味着您没有侦听正确的事件。
  • 如果您看到控制台日志，请查看将被褪色的元素，并检查它是否是您刚刚销毁的结构。
票数 1
EN

Stack Overflow用户

发布于 2018-08-17 07:16:49

你定义了两次类：

:class => 'delete_fabric', class: "btn btn-primary btn-sm"

试着把这两者结合起来：

class: "btn btn-primary btn-sm delete_fabric"

票数 0
EN

Stack Overflow用户

发布于 2018-08-17 08:57:06

为每个fabric记录添加唯一id，即(id="fabric_<%=fabric.id%>")

代码语言：javascript
复制
<!-- SHOW FABRIC COLLECTION / FABRIC OPTIONS-->
<div class="card-deck">
  <% @fabrics.each do |fabric| %>
  <div class="col-sm-6 col-md-4 col-lg-3" id="fabric_<%=fabric.id%>">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="<%=fabric.image%>">
      <div class="card-body">
        <h5 class="card-title"><%= fabric.fabric_name%></h5>
        <p class="card-text"><%= fabric.fabric_description%></p>
        <p class="card-text"><%= fabric.printed%></p>
        <!--Listing fibre types -->
        <p class="card-text"><small class="text-muted">Composition: 
          <% fabric.fibre.each do |fibre| %>
          <%=fibre %>
          <%end%>
          </small>
        </p>
        <!--Listing colours -->
        <p class="card-text"><small class="text-muted">Colours: 
          <% fabric.colour.each do |colour| %>
          <%=colour %>
          <%end%>
          </small>
        </p>
        <!--Listing suitable for -->
        <p class="card-text"><small class="text-muted">Suitable For: 
          <% fabric.suitable_for.each do |item| %>
          <%=item %>
          <%end%>
          </small>
        </p>
        <!--Show page button -->
        <%= link_to "Full Details", show_fabrics_path(fabric), class: "btn btn-primary btn-sm" %>
        <!--AJAX DELETE BUTTON IN PROGRESS-->
        <%= link_to "Delete Fabric", delete_fabric_path(fabric), method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_fabric'%>
        <!--AJAX DELETE BUTTON -->
      </div>
    </div>
  </div>
  <% end %>
</div>

在控权人中：

代码语言：javascript
复制
def destroy
  @fabric = Fabric.find(params[:id])
  if @fabric.destroy
    flash[:success] = "Fabric deleted successfully!"
  end

  respond_to do |format|
    format.html { redirect_to index_fabrics_url }
    format.json { head :no_content }
    format.js { render layout: false }
  end
end

在destroy.js.erb中

代码语言：javascript
复制
<%if flash[:success].present?%>
  $("#fabric_<%=params[:id]%>").fadeOut();
  //$("#fabric_<%=params[:id]%>").remove();
<%end%>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51890079

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档