Mein Ajax funktioniert nicht

Question

Ich lerne Ajax, was großartig ist, aber ich stoße auf einige Schwierigkeiten bei der Implementierung. Ich möchte ein fadeOut das Element #group_box aufrufen, wenn ein Benutzer auf eine Schaltfläche #rem_req_btn klickt.

Mein Code funktioniert nur auf dem ersten Element meiner Liste, aber nicht die anderen eins. Ich habe versucht, die Gruppen-ID im div hinzuzufügen, funktioniert aber nicht.

Jeder kann mir helfen, den besseren Weg zu finden, um diese Aktion zu erreichen?

Index Gruppe:

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

_Konzerneffekte:

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

Ajax-Datei:

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

Answer 1

ändern folgende

Index Template <div id="group_box"> zu <div id="group_box#{group.id}">

entfernen JS Code aus Ihrer Index-Seite

$ ('# rem_req_btn') bind (. 'Ajax: Erfolg' , function() { $ (this) .closes ('# group_box'). fadeOut(); });

Erstellen Sie eine .js.erb Vorlage auf der Ebene index.erb mit dem Namen gleich dem Aktionsname. z.B. wenn rem_req_group_path(group)-rem_req_group Aktion in Ihrem Controller zugeordnet wird, wenn der Antrag der Landung, wenn Sie auf den Link klicken, dann wäre der Name rem_req_group.js.erb

jetzt für Ihre Antwort folgend

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

Answer 2

Sie das id-Attribut in HTML nicht wiederholen kann, bedeutet, Sie können, aber Sie sollten nicht ... ID sollte eindeutig sein, ohne Zweifel jQuery wählt nur den ersten Abschnitt ... Bitte versuchen Sie es stattdessen mit Klasse.