title: jQuery UI Tabs: Mismatching fragment identifier
body: <p>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.</p>
  
  <pre><code>#schedule
    %ul
      - @schedule.each_index do |i|
        %li
          %a{:href =&gt; "#schedule-#{i}"} #{@schedule[i][:week_range]}
    - @schedule.each_index do |i|
      %div{:id =&gt; "#schedule-#{i}"}
        %p test
  </code></pre>
  
  <p>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.</p>
  
  <p>In applications.js I have:</p>
  
  <pre><code>$('#schedule').tabs();
  </code></pre>
  
  <p>However, this doesn't render properly and when I click on a tab it gives me this error in the javascript console:</p>
  
  <pre><code>jQuery UI Tabs: Mismatching fragment identifier.
  </code></pre>
  
  <p>I'm using the latest jQuery and jQuery UI releases.</p>
  
  <p>Can anyone tell me what I'm doing wrong?</p>
  
  <p>This is what the corresponding HTML looks like:</p>
  
  <pre><code>&lt;div id='schedule'&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href='#schedule-0'&gt; December 27 - January 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href='#schedule-1'&gt; January 3 - January 9&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href='#schedule-2'&gt; January 10 - January 16&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href='#schedule-3'&gt; January 17 - January 23&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id='#schedule-0'&gt;
          &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='#schedule-1'&gt;
          &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='#schedule-2'&gt;
          &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='#schedule-3'&gt;
          &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>