title: Issue loading content with jQuery UI Tabs with Ajax
body: <p>I have my jQuery UI Tabs working right now but need help implementing the Ajax side. What I need help with is getting <code>#tab-2</code> to show information (<code>@user.messages</code>) from the <code>MessagesController</code> in a layout that exists as a partial in the <code>MessagesController</code>.</p>
  
  <p><strong>My <code>application.js</code>:</strong></p>
  
  <pre><code>$(function() {
      $( "#tabs" ).tabs({
          ajaxOptions: {
              error: function( xhr, status, index, anchor ) {
                  $( anchor.hash ).html(
                      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                      "If this wouldn't be a demo." );
              }
          }
      });
  });
  </code></pre>
  
  <p><strong>My profile <code>show.html.erb</code>:</strong></p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul id="infoContainer"&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to "Messages", "messages/profile_messages", :remote =&gt; true %&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
    &lt;/div&gt;&lt;!-- end profile-about --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My <code>_profile_messages</code> partial in MessagesController:</strong></p>
  
  <pre><code>&lt;div id="tabs-2"&gt;
      &lt;% for 'message' in @user.messages %&gt;
          &lt;div class="message"&gt;
          &lt;/div&gt;
      &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is the HTML output of the jQuery UI Tabs:</strong></p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul id="infoContainer"&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="messages/profile_messages" data-remote="true"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;div id="tabs-1"&gt;
  </code></pre>
  
  <p><strong>Here are the tabs as seen in Firebug:</strong></p>
  
  <pre><code>&lt;div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"&gt;
    &lt;ul id="infoContainer" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"&gt;
      &lt;li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"&gt;&lt;a href="#tabs-1"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="#ui-tabs-1" data-remote="true"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The fact that Firebug shows the second link as #ui-tabs-1 seems odd to me. Then when I click the "Messages" link to load the @user.messages, Firebug shows an error <code>Failed to load resource: the server responded with a status of 404 (Not Found) - :3000/profiles/messages/profile_messages</code>.</p>