Question

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.

Answer 1

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