Question

I have a Profile in my Rails 3 app. When the Profile is viewed, the Profile’s about information shows in a div container by default. What I want to do is replace the “about” information in the div with messages from the User when a “messages” link is clicked. (The messages should load according to the profile_messages template.) To do this, I turned to jQuery UI Tabs.

So the “about” information exists in Tab-1. The “Messages” is in a template called profile_messages that I’ve tried loading from both the ProfilesController and the MessagesController.

I’ve gotten a lot of help here on SO to get to where I’m at. However, for some reason I can’t get the actual messages to show up. What happens when I click “messages is I see the error message in my jQuery. If I inspect the element, I see this:

Failed to load resource: the server responded with a status of 404 (Not Found) `profile_messages`

Here is my code. If anyone can help me figure out what’s going on I’d appreciate it greatly.

ProfilesShow show.html.erb:

<div id="tabs">
  <ul id="infoContainer">
    <li><a href="#tabs-1">About</a></li>
    <li><%= link_to "Messages", "/profiles/profile_messages", :remote => true %></li>
  </ul>
  <div id="tabs-1">
  </div><!-- end profile-about -->

profile_messages.html.erb:

<div id="tabs-2">
<% for 'message' in @user.messages %>
  <div class="message-1">
  </div>
</div><!-- end messages -->
<% end %>

ProfilesController:

def show
  @profile = Profile.find(params[:id])
  @user = User.find(@profile.user_id)
end

Routes.rb:

resources :messages do
  resources :responses
end
resource :messages do
  collection do
    get :profile_messages
  end
end

profile_messages.js.erb:

$( "#tabs" ).html( "<%= escape_javascript( render(@profile.messages) ) %>" );

From rake routes:

message GET  /messages/:id(.:format) {:action=>"show", :controller=>"messages"}
profile GET  /profiles/:id(.:format) {:action=>"show", :controller=>"profiles"}
profile_messages_messages GET  /messages/profile_messages(.:format {:action=>"profile_messages", :controller=>"messages"}

jQuery UI Tabs:

$(function() {
    $( "#tabs" ).tabs({
        spinner: '<img src="">' },{
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "There was an error loading this tab. Please try again." );
            }
        }
    });
});

As I said, I’m really close so if anyone can help me figure out what I’m doing wrong I’d appreciate it.

UPDATE: If I switch the route from profiles/profile_messages to messages/profile_messages here is the HTML output of the jQuery UI Tabs:

<div id="tabs">
  <ul id="infoContainer">
    <li><a href="#tabs-1">About</a></li>
    <li><a href="messages/profile_messages" data-remote="true">Messages</a></li>
  </ul>
<div id="tabs-1">

Here is what I see in Firebug:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul id="infoContainer" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">About</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-1" data-remote="true">Messages</a></li>
  </ul>
  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
  </div>
</div>

The fact that Firebug shows the second link as #ui-tabs-1 seems odd to me.

Answer 1

Thanks to the combined efforts of folks here on SO I was able to get this to work. Check out these questions for more code:

Exclude application layout in Rails 3 div

Rails 3 jQuery UI Tabs issue loading with Ajax