Bootstrap 4 药丸标签不会加载内容——Rails 4

Question

我目前正在尝试使用引导程序 4 选项卡/药丸导航在 3 个单独的选项卡中加载部分内容。选项卡本身未激活，仅使用默认值。最后，单击按钮时是否可以 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>

更新： 我添加了应该激活下面标签的点击事件

<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