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

Question

Я пытаюсь получить счетчик для обновления в моем представлении при нажатии кнопки на моей странице без обновления страницы sh

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

$(document).on('ajax:success', '.follow-btn-show', function(e){
  let data = e.detail[0];
  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';
  }
});

Это отлично работает для смены кнопки, но как мне обновить счетчик при нажатии на другой div? Я попытался прикрепить это:

$(this).text( $ {data.count} );

, но он обновляется на кнопке, где мне это не нужно, и я не назначил атрибут div к моему сценарию есть. Мне нужно назначить атрибут и обновить его, но я не знаю как.

Мой счет в представлении

<div class="loop"><b><%= @user.followers.count %></b></div> Followers

Контроллер

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

Любые предложения ?

ты

Answer 1

Ответ: я просто перезагружаю div с идентификатором после щелчка ...

$(document).on('ajax:success', '.follow-btn', function(e) {
  let data = e.detail[0];
  let method = this.dataset.method === 'post' ? 'delete' : 'post';
  let txt = {
    post: 'Follow',
    delete: 'Unfollow'
  }[method];
  //loop
  $(`.follow-btn[href="${this.getAttribute('href')}"]`).each(function() {
    this.dataset.method = method;
    $(this).text(`${txt}`);
  });
   $("#following_count").load(" #following_count > *")
});

На мой взгляд

<div id="following_count" class="inline">...<%= current_user.following.count %>...</div>

Не уверен, насколько это эффективно или надежно, но это работает.