Question

In my Rails app, there is a div in the User’s profile that I want to load different data into depending on which link is clicked. Exactly how Facebook loads different data on the right depending on which link (info, wall, photos, friends) is clicked on the left. I notice two things in particular that I would like to recreate:

1. All of the data doesn’t load on the profile (at least it doesn’t show in the source code). So it doesn’t seem like a show/hide scenario.
2. The page doesn’t refresh but the URL does change.

I’m new to programming, but am curious as to how I can recreate this behavior. Here is the div I’m talking about in my Profiles#show action:

<div id="info">
  <div id="infoContainer">
    <ul id="questions">
      <li>
        <%= link_to 'About' %>
      </li>
    </ul>
    <ul id="settingsLinks">
      <li><a href="#">Lists</a></li>
      <li>
        <%= link_to 'Pics' %>
      </li>
    </ul>
  </div>
  <%= render :partial => 'show_about' %>
</div><!-- end info -->

As you see, I want the “About” to show by default. But I want to load the others into the div (replacing “About”) if the Lists or Pics link is clicked. Can anyone help?

Answer 1

I ended up using jQuery UI tabs as my solution with AJAX. I had everything together code-wise but forgot to include the stylesheet. So anyone looking to implement jQuery UI Tables, remember to either download and include a jQuery UI Stylesheet, or include the elements you need in your base css file.