Próbuję uzyskać liczenie do aktualizacji na moim widoku na przycisku Kliknij na mojej stronie bez odświeżania strony

Aplikacja.js.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';
  }
});

Działa to idealne dla zmiany przycisku, ale jak mogę uzyskać moją liczbę do aktualizacji na kliknięcie do innego div? Próbowałem go dołączyć:

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

Ale aktualizuje na przycisku, w którym tego nie chcę, a ja nie przypisałem atrybutu div do mojego skryptu. Muszę przypisać atrybut i mieć aktualizację, ale nie wiem, jak.

Moja liczba w widoku

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

Kontroler

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

Jakieś sugestie?

Ty

0
davidm 2 sierpień 2020, 13:13

1 odpowiedź

Najlepsza odpowiedź

Odpowiedź Czy po prostu przeładuj div z identyfikatorem po kliknięciu ...

$(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 > *")
});

Według mnie

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

Nie jestem pewien, jak skuteczny lub niepowodzenie jest to, ale działa.

0
davidm 4 sierpień 2020, 18:03