我的阿贾克斯不起作用

问题描述：

我正在学阿贾克斯，这很棒，但我在执行它时遇到了一些困难。当用户点击按钮#rem_req_btn时，我想调用fadeOut元素#group_box。我的阿贾克斯不起作用

我的代码只适用于我的列表的第一个元素，但不是其他的。我试图在div中添加组标识，但不起作用。

任何人都可以帮助我找到更好的方法来实现此操作？

指数组：

<% @my_groups.each do |group| %> 
    <div id="group_box"> 
    <%= render 'group', group: group %> 
    </div> 
<% end %>

_group：

<div class="col-md-3"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h3 style="margin-top:5px; text-align:center"> 
     </h3> 
     </div> 
     <div class="panel-body"> 
     Test 
     </div> 

     <div class="panel-footer" style="height: 50px; padding:7px;"> 
     <div class="btn btn-default"> 
      <i class="fa fa-tasks" aria-hidden="true"></i>  
     </div> 
     <%- unless group.main? %> 
      <%= link_to rem_req_group_path(group), method: :patch, data: {confirm: "Etes vous sur de vouloir sortir de ce groupe ?"}, id: "rem_req_btn", remote: true do %> 
      <div class="btn btn-danger pull-right"> 
       <i class="fa fa-sign-out" aria-hidden="true"></i> 
      </div> 
      <% end %> 
     <% end %> 

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

阿贾克斯文件：

$('#rem_req_btn').bind('ajax:success', function() { 
    $(this).closest('#group_box').fadeOut(); 
});

答

更改以下

索引模板 <div id="group_box">到<div id="group_box#{group.id}">

从索引页删除JS代码

$（ '＃rem_req_btn'）绑定（ 'AJAX：成功' ，function（）{（this）.closest（'＃group_box'）。fadeOut（）; }）;

在index.erb级别创建一个.js.erb模板，其名称等于操作名称。例如。如果rem_req_group_path(group)被映射到控制器就是当你点击链接请求降落rem_req_group行动，那么名称将是现在rem_req_group.js.erb

在rem_req_group.js.erb写入以下

#("#group_box#{params[:id]}").fadeOut();

嗨，@AmitPatel，谢谢你的回答，这真的很清楚。我遵循你的解释，它的工作！我的错误是忘记我的文件中的.erb。所以我的阿贾克斯不明白谢谢大家，祝你有美好的一天 –

答

你不能重复id属性在HTML，意味着你可以，但你不应该... id应该是唯一的，毫无疑问，jQuery只挑选第一部分...请尝试使用class。

谢谢您的回答，我已经尝试过你的解决方案，但仍然无法工作。我也尝试将添加到div，但它不再工作。任何想法可能是不正确的？ –

我的阿贾克斯不起作用

相关推荐