Different javascript on tabs
I'm trying to set up a page wherein each tab runs different
javascript. However, it seems like only the javascript of the base
page gets loaded, and none of the tabs work as they should.
I'm new to using jquery tabs and ruby, so please forgive any basic
mistakes.
Here is how everything is set up:
application.html.erb (base layout)
----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title><%= @page_title %></title>
<%= stylesheet_link_tag "style" %>
<%= yield :javascript_includes %>
<%= javascript_include_tag :defaults %>
</head>
<body class="<%= @body_class %>">
<div id="header"><a href="/"><h1>MyWebpage</h1></a></div>
<div id="container">
<%= @content_for_layout %>
</div>
</div>
</body>
<script type="text/javascript">
<%= yield :footerjs %>
</script>
</html>
details.html.erb (the base page with the tabs)
----------------------
<div id="details_tabs">
<ul class="tabs-list">
<li><a href="LINK TO OVERVIEW"><span>Overview</span></a></li>
<li><a href="LINK TO TIMELINE"><span>Timeline</span></a></li>
</ul>
</div>
<% content_for :footerjs do %>
$(document).ready(function() {
$("#details_tabs").tabs({cache: false});
});
<% end %>
timeline.html.erb (timeline tab that has the javascript that isn't
getting loaded)
-------------------------
<div id="timeline" style="height: 800px; border: 1px solid #aaa"></
div>
<% content_for :footerjs do %>
function onLoad() {
// This is the function that I'd like to run on the "timeline"
div, but none of this stuff gets loaded when this tab is selected
}
$(document).ready(function() {
onLoad();
});
<% end %>