CODEWITHSUNDEEP
ajaxruby-on-rails-3tabs
tvalent2
tvalent2

Reputation: 5009

Getting started with tabs in Rails app

I was researching here on SO how to implement a tabbed interface in my Rails app. For example, I like how Ryan Bates uses it in his Railscast overview page.

I want to mimic that in my Rails app so that a User's profile has a navigation in it with two or three links. Clicking either link loads information using AJAX (I'm guessing). Then the URL shows /profiles/1/view?info or /profiles/1/view?otherdata

I came across this question, with the following solution:

I would make the contents of each tab be called in by a separate ajax request. This would give you the following benefits

  1. Now each tab can easily be a different view/controller
  2. You only need to load the contents for a tab when it is used; you won't be processing code/downloading html for tabs that the user doesn't use.

The problem is I'm new to Rails and have no idea how to do this. Can anyone point me to some resources that help explain how to set this up? I'd be tabbing between profile data and messages to the user.

Any help would be much appreciated.

Upvotes: 2

Views: 4400

Answers (2)

mliebelt
mliebelt

Reputation: 15525

Even it may be hip to use AJAX today, why not do the Simplest Thing That Could Possibly Work? If have done in the past something like the following:

Adding tabs to the UI by code like the following (notation is HAML, sorry for that). As a result, you get a list of links that link to the controllers index action. This code is part of the file layouts/_header.html.haml.

%ul.sideul
  - ["page", "notice", "contact"].each do |thing|
    - curr = controller.controller_name.singularize == thing
    - cl = curr ? 'current' : 'normal'
    %li.normal= link_to(thing.humanize, {:controller => controller, :action => "index"}, {:class => cl })

Add then the CSS to your application that this is shown as tabs. There you will need the information if a li is current or normal.

Every time you click then on the tab, the index action of that controller is called, and after that, the index page is shown.

Your file layouts/application.html.haml should have the following content (at least). I have skipped what is not necessary for the example. The template is taken from html5-boilerplate for Rails.

%body{ :class => "#{controller.controller_name}" }
  #columns
    %header#side
      = render "layouts/header"

    #main{ :role => 'main' }
      %h1= yield(:title)
      = render "layouts/flashes"
      = yield

  = render "layouts/javascripts"

The relevant parts for this solution is:

  • = render "layouts/header": Renders the list of tabs inside of #columns > header#side
  • = yield: Renders whatever is in the view for the action of the controller. In our case first the index page, may be later the edit or show page.

Upvotes: 0

sscirrus
sscirrus

Reputation: 56749

As you're new to Rails I'd suggest breaking up your goal into 2 sections: first, get the tabs working with simple content, then add the AJAX.

Step 1 - Getting the tabs working

Have a look at the JQuery UI tabs demos: http://jqueryui.com/demos/tabs/

The code looks something like this:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.</p>
  </div>
</div>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

Step 2 - Getting the AJAX working

Check out: http://jqueryui.com/demos/tabs/#ajax

Upvotes: 2

Related Questions