RoR и json: нет refre sh при нажатии кнопки и обновлении счетчика

Question

Я пытаюсь изменить кнопки следования, не обновляя страницу при нажатии. Следующий код работает, но только для первого сообщения в l oop, которое я визуализирую в представлении. Остальные не меняются / работают.

На мой взгляд

<% @tweets.reverse.each do |tweet| %>
...
<% if current_user.id != tweet.user.id %> 
        <% if current_user.following?(tweet.user) %>
          <%= link_to "Unfollow", relationships_path(user_id: tweet.user), data: { remote: true, type: :json, method: :delete }, :class => "follow-btn btn btn-primary" %>
         <% else %>
           <%= link_to "Follow", relationships_path(user_id: tweet.user), data: { remote: true, type: :json, method: :post }, :class => "follow-btn btn btn-primary" %>
        <% end %>
        <br>
       <% end %>
       <hr/>
      <% end %>
<% end %>

приложение. js

$(document).on('ajax:success', '.follow-btn', function(event){
  let $el = $(this);
  let method = this.dataset.method;
  if (method === 'post') {
    $el.text('Unfollow');
    this.dataset.method = 'delete';
  } else if (method === 'delete') {
    $el.text('Follow');
    this.dataset.method = 'post';
  }
});

Как заставить его обновлять все следуйте за кнопками, которые указывают на того же пользователя в l oop?

Вот новый код

application.js

$(document).on('ajax:success', '.follow-btn', function(event){
  let $el = $(this);
  let method = this.dataset.method;
  if (method === 'post') {
    $('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Unfollow');  });
    this.dataset.method = 'delete';
  } else if (method === 'delete') {
    $('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Follow');  });
    this.dataset.method = 'post';
  }
});

Контроллер

def create
    current_user.follow(@user)
    respond_to do |format|
      format.html
      format.json { head :created }
    end
  end

  def destroy
    current_user.unfollow(@user)
    respond_to do |format|
      format.html
      format.json { head :no_content }
    end
  end

Здесь кнопки все еще работают но теперь не меняйте вид. Как я могу заставить это работать?

Count

В том же представлении, но визуализировано через частичное (users / _search_users. html .erb) Я считаю, что так. Как я могу сделать так, чтобы этот счетчик обновлялся без обновления страницы sh при нажатии кнопки?

<% @users.each do |user| %>
...
    <td stlye="padding:0 60px 0 60px;" col width="130" align="right"><b><%= user.followers.count %> Followers</b></td>
<% end %>

Я хотел бы получить и кнопку, и счетчик для обновления при щелчке без обновления sh. При необходимости я могу добавить еще код.

ty

Answer 1

$(document).on('ajax:success', '.follow-btn', function(e) {
  // the JSON fetched
  let data = e.details[0];
  // the method we are changing to
  let method = this.dataset.method === 'post' ? 'delete' : 'post';
  // lookup table for the text
  let txt = {
    post: 'Follow',
    delete: 'Unfollow'
  }[method];
  // loop through elements with the same href
  $(`.follow-btn[href="${this.getAttribute('href')}"]`).each(function() {
    // change the attributes of the single node in the loop
    this.dataset.method = method;
    $(this).text(`${txt} (${data.count})`);
  });
});

// This mocks the ajax call purely for the sake of this stacksnippets example.
// Do not include this in your actual implementation
$(document).on('click', 'a[data-remote]', function(e) {
  window.setTimeout(function() {
    let event = jQuery.Event('ajax:success');
    event.details = [{ count: 5 }, 'No Content'];
    $(e.target).trigger(event);
  }, 25);
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>User 1</p>
  <a href="/follow/1" class="follow-btn" data-method="post" data-remote="true">Follow</a>
  <a href="/follow/1" class="follow-btn" data-method="post" data-remote="true">Follow</a>
</div>
<div>
  <p>User 2</p>
  <a href="/follow/2" class="follow-btn" data-method="post" data-remote="true">Follow</a>
  <a href="/follow/2" class="follow-btn" data-method="post" data-remote="true">Follow</a>
</div>

Вы можете указать количество в ответах JSON, используя render json::

def create
    current_user.follow(@user)
    respond_to do |format|
      format.html
      format.json do
        render json: { count: @user.followers.count }, 
               status: :created  
      end
    end
  end

def destroy
  current_user.unfollow(@user)
  respond_to do |format|
    format.html
    format.json do
        render json: { count: @user.followers.count }, 
               status: :ok
    end
  end
end

Я просто предполагаю связь так что отрегулируйте в соответствии с вашими моделями.