CODEWITHSUNDEEP
ruby-on-rails
Dex
Dex

Reputation: 12749

Rails: Rendering Multiple index.html.erb on a Single Page

I am using tabs and want to load multiple index pages into tabs. For instance:

class AnimalsController < ApplicationController
  def index
    @dogs = Dog.all
    @cats = Cat.all
  end
end

Then in my views/animals/index.html.erb

<ul class="tabs">
  <li>Dogs</li>
  <li>Cats</li>
</ul>
<div id="#dogs">
  <%= render @dogs %>
</div>
<div id="#cats">
  <%= render @cats %>
</div>

Is refactoring out into a partial the only way to achieve this?

I'd like to have them loaded statically at once and not have to resort to doing an Ajax.load() when the tab is clicked.

Upvotes: 2

Views: 1294

Answers (2)

John Bachir
John Bachir

Reputation: 22731

You typically only want to use a partial if you are using the same or almost the same code in more than one place.

When you say "index page", do you really want to use the same code that is used in an index of another controller? If so, then a partial is the best strategy.

Don't use JavaScript to solve a layout / code organization problem.

Upvotes: 1

Shripad Krishna
Shripad Krishna

Reputation: 10498

You have your answer in the question itself. Why don't you just use javascript to hide the two partials and call them when their respective tab is clicked? You don't need ajax for this at all :)

Since you did not mention the javascript library that you use, I will give a generic solution using jquery:

Also you need not add a # to your respective div's ids. Change it to this:

<ul class="tabs">
  <li id="dogs">Dogs</li>
  <li id="cats">Cats</li>
</ul>
<div id="dogs" class="subTabs">
  <%= render @dogs %><hr />
</div>
<div id="cats" class="subTabs">
  <%= render @cats %><hr />
</div>


$(document).ready(function() {
    $('.subTabs').hide(); //Hide the subTabs as soon as the DOM is loaded.

    $('li').live('click', function(e) {
        $('.subTabs').hide(); //Calling this again so as to remove an already loaded
                                tab, if any. You can refactor this part to make it
                                even simpler.
        $('body').find('.subTabs').attr('id',$(this).attr('id')).show();
             //This finds the ".subTabs" whose id is the same as the "li" id that
               was clicked and shows it. Ofcourse, even this can be made even more
               compact had i known your entire DOM structure.     
    });
});

Edit: You also have to make sure that you style it using CSS to make it look more like tabs if you haven't already. :)

Hope this helps. :)

Upvotes: 3

Related Questions