Question

我的jQuery UI标签现在正在运行，但需要帮助实现Ajax方面。我需要帮助的是让#tab-2在@user.messages中作为部分格式存在的布局中显示来自MessagesController的信息（MessagesController）。

我的application.js：

$(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." );
            }
        }
    });
});

我的个人资料show.html.erb：

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

我在MessageController中的_profile_messages部分：

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

以下是jQuery UI标签的HTML输出：

<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">

以下是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>

Firebug将第二个链接显示为＃ui-tabs-1这一事实对我来说似乎很奇怪。然后，当我单击“消息”链接以加载@ user.messages时，Firebug会显示错误Failed to load resource: the server responded with a status of 404 (Not Found) - :3000/profiles/messages/profile_messages。

Answer 1

感谢各位朋友的共同努力，我能够让这一切发挥作用。查看这些问题以获取更多代码：

Exclude application layout in Rails 3 div

Rails 3 jQuery UI Tabs issue loading with Ajax

使用Ajax使用jQuery UI选项卡加载内容

1 个答案: