Вкладки таблеток Bootstrap 4 не загружают содержимое - Rails 4

Question

В настоящее время я пытаюсь загрузить частички в 3 отдельных вкладках с помощью начальной загрузки 4 вкладки / таблетки. Сами вкладки не активируются, по умолчанию используется только. И наконец, возможно ли в AJAX обновить частичное нажатие кнопки?

 <ul class="nav nav-pills mb-3" id="myTab" role="tablist">
        <li class="nav-item pill-1">
          <a class="nav-link active bttn-simple bttn-md" id="pills-movies-tab" data-toggle="pill" href="#pills-movies" role="tab" aria-controls="pills-movies" aria-selected="true">Popular Movies</a>
        </li>
        <li class="nav-item pill-2">
          <a class="nav-link bttn-simple bttn-md" id="pills-photo-tab" data-toggle="pill" href="#pills-photos" role="tab" aria-controls="pills-photos" aria-selected="false">Photos</a>
        </li>
        <li class="nav-item pill-3">
          <a class="nav-link bttn-simple bttn-md" id="pills-feature-tab" data-toggle="pill" href="#pills-features" role="tab" aria-controls="pills-features" aria-selected="false">Features</a>
        </li>
      </ul>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-movies" role="tabpanel" aria-labelledby="pills-movie-tab">
                <%= render @movies %>
              <%= paginate @movies %>
            </div>
            <div class="tab-pane fade" id="pills-photos" role="tabpanel" aria-labelledby="pills-photo-tab">
              <%= render @photos %>
              <%= paginate @photos %>
              <p>Hi Tab 2</p>
            </div>
            <div class="tab-pane fade" id="pills-features" role="tabpanel" aria-labelledby="pills-feature-tab">
              <%= render @features %>
              <%= paginate @features %>
              <p>Hi Tab 3</p>
            </div>
          </div>
        </div>

UPDATE: Я добавил событие нажатия, которое должно активировать вкладки ниже

<script type="application/javascript">
    $(document).on('turbolinks:load', function () {
        $('#myTab a').on('click', function (e) {
            e.preventDefault()
            $(this).tab('show')
        });
    });
</script>

Answer 1

Вы можете отправить запрос через AJAX на ваш контроллер, а затем заменить html-данные на этой вкладке.

Примерно так:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.preventDefault();
    var type = $(this).data('type');
    $.ajax({
      data: { type: type },
      url: window.location.pathname,
      success: function(data){
        $("#" + type).html(data.html);
      }
    });

Контроллер:

def index
  respond_to do |format|
    format.html { ... }
    format.json { 
      type = params[:type]
      records = type.camelize.constantize.all

      render json: { 
        html: render_to_string(partial: "#{type.pluralize}",
                               layout: false,
                               formats: [:html],
                               locals: { records: records })
      }
     }                                                    
  end
end