我的阿賈克斯不起作用

我正在學阿賈克斯，這很棒，但我在執行它時遇到了一些困難。當用戶點擊按鈕#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(); 
});

來源

2017-07-17 jacques Mesnet

更改以下

索引模板 <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();

來源

2017-07-17 12:36:15

嗨，@AmitPatel，謝謝你的回答，這真的很清楚。我遵循你的解釋，它的工作！我的錯誤是忘記我的文件中的.erb。所以我的阿賈克斯不明白<%@group.id%> 謝謝大家，祝你有美好的一天 –

你不能重複id屬性在HTML，意味着你可以，但你不應該... id應該是唯一的，毫無疑問，jQuery只挑選第一部分...請嘗試使用class。

來源

2017-07-17 10:59:23

謝謝您的回答，我已經嘗試過你的解決方案，但仍然無法工作。我也嘗試將<%=group.id%>添加到div，但它不再工作。任何想法可能是不正確的？ –

我的阿賈克斯不起作用

回答

相關問題