我現在有我的jQuery UI選項卡,但需要幫助實現Ajax端。我需要幫助的是#tab-2
在MessagesController
中顯示MessagesController
中的信息(@user.messages
),該佈局在MessagesController
中以部分形式存在。使用Ajax加載jQuery UI選項卡的內容
我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>
我_profile_messages
部分在MessagesController:
<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">
下面是選項卡中所見螢火蟲:
<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>
該螢火蟲示出了第二連桿的事實#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
。