jQuery UI Tab persistence (coffeescript) - jquery-ui

Question

I have a Rails 3 app with some jQuery UI tabs to display published and unpublished stories. Here is the erb template:
<ul class="tabs">
<li><strong>Filter:</strong></li>
<li class="active"><%= link_to 'Published', '#published_stories' %></li>
<li><%= link_to 'Unpublished', '#unpublished_stories' %></li>
</ul>
<div id="published_stories">
<% #published_stories.each do |published_story| %>
<article class="story_article">
<h2><%= published_story.title %></h2>
<ul>
<li><%= link_to "Update", edit_story_path(published_story) %></li>
<li><%= link_to "Destroy", story_path(published_story), method: "delete", confirm: "Are you sure?" %></li>
</ul>
<%= time_tag published_story.published_at, pubdate: true %>
<%= markdown published_story.content.truncate(400, separator: " ") %>
</article>
<%= paginate #published_stories %>
<% end %>
</div>
<div id="unpublished_stories">
# As above to show unpublished stories
</div>
I'm listening to the click event on the li element to style the active tab. Now I would like to use jquery.cookie.js so that after a page refresh the previously selected tab persists. Here is what I have already:
jQuery ->
$(".tab_container").tabs(
active : ($.cookie('saved_tab') || 0),
activate : -> (event ui)
newIndex = ui.newTab.parent().children().index(ui.newTab)
$.cookie('saved_tab', newIndex, { expires: 1 })
)
$(".tabs li").click ->
$(this).addClass("active").siblings().removeClass("active")
The error message I get is that it can't find the variable ui. Any help is much appreciated.

Answer 1

I can see a few things that are off in your CoffeeScript.
First of all, functions are defined like:
(arg, arg, ...) -> function_body
in CoffeeScript so you want to say activate: (event, ui) -> .... Your -> (event ui) is interpreted as:
-> event(ui)
and that doesn't make much sense.
Secondly, you have to be very careful with your indentation in CoffeeScript, indentation is pretty much all you have for defining the structure of your code so you must be very careful with it. When you say this:
activate : -> (event ui)
newIndex = ui.newTab.parent().children().index(ui.newTab)
$.cookie('saved_tab', newIndex, { expires: 1 })
CoffeeScript doesn't see the newIndex assignment or $.cookie call as part of the activate method, CoffeeScript sees three separate and unrelated statements.
Applying the above gives us:
$(".tab_container").tabs(
active : ($.cookie('saved_tab') || 0),
activate : (event, ui) ->
newIndex = ui.newTab.parent().children().index(ui.newTab)
$.cookie('saved_tab', newIndex, { expires: 1 })
)