jQuery UI Tabs: Mismatching fragment identifier

Question

I'm trying to create an appointment scheduler using jQuery (UI), Haml, and Rails. I'm making a set of tabs for the next 4 weeks.

#schedule
  %ul
    - @schedule.each_index do |i|
      %li
        %a{:href => "#schedule-#{i}"} #{@schedule[i][:week_range]}
  - @schedule.each_index do |i|
    %div{:id => "#schedule-#{i}"}
      %p test

Ideally, this would create a set of tabs such as (December 27th-January Nth) as the tab title and then have "test" in each box.

In applications.js I have:

$('#schedule').tabs();

However, this doesn't render properly and when I click on a tab it gives me this error in the javascript console:

jQuery UI Tabs: Mismatching fragment identifier.

I'm using the latest jQuery and jQuery UI releases.

Can anyone tell me what I'm doing wrong?

This is what the corresponding HTML looks like:

<div id='schedule'>
    <ul>
        <li>
            <a href='#schedule-0'> December 27 - January 2</a>
        </li>
        <li>
            <a href='#schedule-1'> January 3 - January 9</a>
        </li>
        <li>
            <a href='#schedule-2'> January 10 - January 16</a>
        </li>
        <li>
            <a href='#schedule-3'> January 17 - January 23</a>
        </li>
    </ul>
    <div id='#schedule-0'>
        <p>test</p>
    </div>
    <div id='#schedule-1'>
        <p>test</p>
    </div>
    <div id='#schedule-2'>
        <p>test</p>
    </div>
    <div id='#schedule-3'>
        <p>test</p>
    </div>
</div>

Answer 1

Your ids should not have a # in them in the generated HTML. Change %div{:id => "#schedule-#{i}"} to %div{:id => "schedule-#{i}"}