используйте JQuery кнопку «Далее», чтобы открыть следующий клуб

Question

У меня есть кнопка, которая при нажатии должна вызвать следующий клуб в DOM без обновления. Это работает для следующего клуба один раз, но не будет работать после этого. Мне нужно как-то изменить идентификатор клуба на кнопке, чтобы позволить API получить информацию о клубе следующего. Я не уверен, что лучший способ сделать это. Есть идеи?

 <div class="container-fluid">
  <h1>Your Club</h1>
  <br>
    <div id="club-info">
    <h2 class="club-name"><%= @club.name %></h2>
    <br>
    <h2 class="club-brand"><%= @club.brand %></h2>
    </div>
  <br>
  <button class="next-club" data-id="<%= @club.id %>">Next Club</button>
  <br>
  <br>
  <%= link_to "See all of your clubs", club_path %>
</div>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('.next-club').click(function() {
      var id = $(this).data("id");
      $('#club-info').html('')
      $.get('/clubs/' + id + '/next', function(data, status) {
        $('#club-info').append(`<h2>${data.name}</h2>` + 
          `<br>` + 
          `<h2>${data.brand}</h2>`);
      })
    }) 
  });
</script>

Answer 1

Вам необходимо назначить новый идентификатор кнопке после успешного завершения и убедиться, что динамически обновляет атрибут данных этой кнопки.

Отметьте $that.data часть, где присваивается новый идентификатор данных. при использовании friendly-id сделайте это.

$(document).on('click', '.next-club', function(e) {
   e.preventDefault();
   var id = $(this).data("id");
   var $that = $(this);         

   $.get('/clubs/' + id + '/next', function(data, status) {
        if(status == 'success'){
            $('#club-info').html('')
            $('#club-info').append(`<h2>${data.name}</h2>` + 
                   `<br>` + 
                   `<h2>${data.brand}</h2>`);
            $that.data('id', data.id); #assign new id
        }
   })
}

Answer 2

При получении запроса вы можете добавить

$('.next-club').data('id', data.id);

Выше будет использоваться Jquery .data для изменения отправленного идентификатора. (https://api.jquery.com/data/)