Geek Answers Handbook

How to get content for each tab using AJAX? Rails4, Bootstrap3

I have 4 sections in the "Page View" section. I work where ALL the contents of each tab are retrieved and displayed when the Event page is requested. It doesn't seem like a good scalability solution ...

How to get content for each tab using AJAX when clicking on a tab?

(The first lesson ... it looks just theoretical, but you can’t get it to work)

I tried adding remote: truetabs to the links, but this does not reflect well on the links on the page - it makes the same receive request Events#Showfor all tabs, which makes it difficult to determine the contents of the tab requested. If I change the href tab to the corresponding links to the controllers, then it breaks the switching of the boot tab. I lose anyway.

Each tab content is divided into separate controllers, so individual content can be selected.

For tab 2, I need to get the content for which I have ever been active nav-pill. And if I'm on Tab # 2, I want to switch its contents from Browse to details and back using links nav-pills.

Using Rails 4 w / bootstrap 3, haml, coffeescript.

Events /show.html.haml

/ Nav tabs
%ul.nav.nav-tabs.color
  %li.active
    =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab4", "#tab4", html_options = { "data-toggle" => "tab" }

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p Fetch content
  .tab-pane.active#tab2
    %ul.nav.nav-pills
      %li.active= link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"}
      %li= link_to 'Details', "#details", html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane.active#details
          %p Fetch details
  .tab-pane.active#tab3
    %p Fetch content
  .tab-pane.active#tab4
    %p Fetch content

Controllers / events _controller.rb

def show
  # currently have several database queries to get data for each tab :(

  respond_to do |format|
    format.html
    format.js
  end
end

views/events/show.js.erb ( remote:true, )

$('div#tab2').append("<%= escape_javascript(render(partial: 'overview', locals: {names: @names, genders: @genders, ages: @ages})) %>")
+3
2

bootstrap tab. show.bs.tab. , ASP.Net MVC - ajax. HTML, ajax, , , , .

- tab-data-tab-remote ', jquery, URL-, data-tab-remote, , href. , HTML- :

<ul class="nav nav-tabs" style="border-right:solid" id="tabs">
    <li><a href="#tab1" data-toggle="tab" data-tab-remote="/tab1url">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab" data-tab-remote="/tab2url">Tab2</a></li>
</ul>            
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">

    </div>
    <div class="tab-pane fade in active" id="tab2">

    </div>
</div>

HTML jQuery -

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    currTabTarget = $(e.target).attr('href');

    var remoteUrl = $(this).attr('data-tab-remote')
    if (remoteUrl !== '') {                

        $(currTabTarget).load(remoteUrl)
    } 
})
+9

swazza85, , ( ):

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var currTabTarget = $(e.target).attr('href');

        var remoteUrl = $(this).attr('data-tab-remote');
        var loadedOnce = $(this).data('loaded');
        if (remoteUrl !== '' && !loadedOnce) {
            $(currTabTarget).load(remoteUrl)
            $(this).data('loaded',true);
        }
    })
+4

More articles:


All Articles