How to make JQuery UI work in a partial?

Question

I am a COMPLETE beginner at JQuery (and javascript in general) but I'm having a go at this.

Simple setup: Layout contains view, which contains simple JQuery tabs just like http://jqueryui.com/demos/tabs/default.html.

I have the following haml in layout head:

%head
  = javascript_include_tag "jquery", "ui/jquery.ui.core", "ui/jquery.ui.widget", "ui/jquery.ui.tabs"
  = stylesheet_link_tag "global", "profiles", "forms", "smoothness/jquery-ui-1.8.2.custom", :cache => true
  :javascript
    $(function() {
      $("#tabs").tabs();
    });

I have the following haml in my new.html.haml view:

#tabs{:class=>"ui-tabs ui-widget ui-widget-content ui-corner-all"}
  %ul{:class=>"ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"}
    %li
      %a{:href => "#tabs-1"}
        %div{:class=>"ui-tabs-panel ui-widget-content ui-corner-bottom"} New User
    %li
      %a{:href => "#tabs-2"}
        %div{:class=>"ui-tabs-panel ui-widget-content ui-corner-bottom"} Existing User
  #tabs-1
    I am a new user
  #tabs-2
    I am an existing user

NOTE: this code works perfectly when it is ALL in the layout. But when I move the second chunk of code from my layout into my view, it stops working.

I thought views are external but functionally identical to their layouts. What exactly do I have to do to get these tabs working properly? Thank you!

Answer 1

There should be no difference. Make sure that you're replacing the exact contents of the second block with = yield. Check the HTML generated in both scenarios. When the second block is moved to a view only whitespace should differ.