Bootstrap nav-tabs not rendering partials in Rails App when using Ajax

Question

I have a nav-tab in my users show-view.

I want to render partial in each tab, I haven't got it to work yet, I have spent all day on figuring this out. I have checked lots of post on stackowerflow and I've googled allot but I can never managed to make each tab show each partial.

I´m really new to coding but I´m learning by doing, so I know it can be a struggle.

My code as it is now is below, it is basically a copy from this post Rails 3/jquery - Tabs rendering partials using ajax

Can anyone take a look at this and help me, I´m really out of options here and very frustrated

thanks in advance Dadi

in my users/show.rb

<div class="container">
<ul class="nav nav-tabs">

 <li  class="active"><%= link_to "Pappír", {:controller => "users", :action  => "tab"}, :remote => true %></li> 
<li data-toggle="tab" ><%= link_to "Rafmagn", {:controller => "users", :action => "tab"}, :remote => true %></li>
 <li data-toggle="tab" ><%= link_to "Vatn", {:controller => "users", :action => "tab"}, :remote => true %></li>

</ul>

<div class="tab-content">
<div  role="tabpanel" class="tab-pane" id="pappir">

  <%= render 'pages/partials/paper_part' %>
</div>



<div  role="tabpanel" class="tab-pane" id="rafmagn">

  <%= render 'pages/partials/electro_part' %>
</div>

 <div  role="tabpanel" class="tab-pane" id="hwater">

  <%= render 'pages/partials/hwater_part' %>
</div>

I did this method in my users_controller.rb

def tab  
  respond_to do |format|
  format.js
 end
end

in view/users/tab.js.erb

$('#pappir').html("<%= escape_javascript(render('pages/partials/paper_part')) %>");
$('#rafmagn').html("<%= escape_javascript(render('pages/partials/electro_part')) %>");
$('#hwater').html("<%= escape_javascript(render('pages/partials/hwater_part')) %>");

in my routes.rb

resources :users, only: [:show] do
  member do
   get 'tab'
  end
end

@Jon The question is basically, why aren´t the tabs working? I can´t figure that out.... I can´t figure out why I can´t switch between tabs, but the first partial is showing up in the Pappir tab and I can see the other tab but I can´t switch between them — DaudiHell
– DaudiHell, Commented Mar 11, 2016 at 1:04
Does your HTML page (probably via the appliction.html.erb layout) load the Bootstrap JavaScript? e.g. something like the last <script> tag in getbootstrap.com/getting-started/#template — Lucas Nelson
– Lucas Nelson, Commented Mar 11, 2016 at 3:13
I don´t have anything like that in the head since I´m using the bootstrap-gem, but I tryed it just in case, and it doesn't work either. — DaudiHell
– DaudiHell, Commented Mar 11, 2016 at 16:55

DaudiHell · Accepted Answer · 2016-03-12 00:43:56Z

Ok, after a long struggle and lots of trial and error I managed to make it work...But charts in the partials are constantly loading and I have to refresh the page to see the charts.... but the main thing works and that was to make each partial appear in each tab.

in my users/show.html.erb the code is like

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
  <%= render 'pages/partials/electro_part' %>
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
  <%= render 'pages/partials/hwater_part' %>
  </div>
</div>

And then in my users/show.js.erb I added

if($("#category_tabs li:first-child").hasClass("active")) {
$(".pappir").html("<%= j render(partial: 'pages/partials/paper_part') %>")
$(".rafmagn").html('')
$(".hwater").html('')
} else 

if($("#category_tabs li:nth-child(2)").hasClass("active")) {
$(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>")
$(".hwater").html('')
$(".pappir").html('')
} else

if($("#category_tabs li:nth-child(3)").hasClass("active")) {
$(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>")
$(".pappir").html('')
$(".rafmagn").html('')
}

If anyone knows a better way to do this, please comment. And if Anyone knows a way to get the partials to refresh inside each tab on click, a sharing of knowledge would be very appreciated.

Jack Rothrock · Accepted Answer · 2016-05-29 05:17:38Z

I was trying to figure this out forever. While I definitely think that your way is much easier to use, here's more of a 'rails' way to do this - I know that this can definitely be improved on, but it's a start.

users/show.html.erb

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

Application.js

$( document ).on('turbolinks:load',function() {
     hwaterLoaded = 0;
     rafmagnLoaded = 0;
     $("#rafmagn_tab").on("click", function(){
        $.ajax({
          type: "GET",
              url: "/rafmagn",
          });
      });
});

Routes.rb - add the route so that we can post to it

 get '/rafmagn', to: 'users#rafmagn', as: 'rafmagn'

In the users controller add the rafmagn action

def rafmagn
  respond_to do |format|
    format.js
  end
end

Now you can use two different JS files - users/show.js.erb and users/rafmagn.js.erb

users/show.js.erb

if(hwaterLoaded === 0){
    $(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>");
    hwaterLoaded = 1;
}

users/rafmagn.js.erb

if(rafmagnLoaded === 0){
    $(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>");
    rafmagnLoaded = 1;
}

Collectives™ on Stack Overflow

Bootstrap nav-tabs not rendering partials in Rails App when using Ajax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related