Question

我目前正在尝试使用bootstrap 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

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

1 个答案: