title: Interpolation of a Ruby string as an ID
body: <p>I am trying to grasp interpolation and am trying to use a dynamic string ( i say dynamic as it can change all the time, I am pulling dates via a screen scrape for movie releases) and as an ID so that i can use bootstrap scrollspy in my project</p>
  
  <p>I created <a href="http://jsfiddle.net/richlewis14/NySg6/" rel="nofollow">a js fiddle</a> using conventional ID's and anchor tags that demonstrates what I am trying to achieve.</p>
  
  <p>As you can see, I would like to show the release date of a film if I am within that section as I am scrolling.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div class="span8 offset2"&gt;
     &lt;div id="dateNav"&gt;
      &lt;ul class="dateNav"&gt;
        &lt;li&gt;&lt;a href="##{date}"&gt;&lt;/a&gt;&lt;% @response.each_pair do |date, movie| %&gt;&lt;%= link_to date_format(date) %&gt;&lt;% end %&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="span9"&gt;
   &lt;% @response.each_pair do |date, movie| %&gt;
    &lt;h3 class="resultTitle fontSize13" id="&lt;%= date %&gt;"&gt;Available on&amp;nbsp;&lt;%= date_format(date) %&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;!-- More movie information here
  &lt;% end %&gt;
  </code></pre>
  
  <p>I have my body set like so </p>
  
  <pre><code>&lt;body data-spy="scroll" data-target="#dateNav"&gt;
  </code></pre>
  
  <p>and am calling scrollspy like so </p>
  
  <pre><code>$('.dateNav').scrollspy()
  </code></pre>
  
  <p>When you are in the relevant section the date is supposed to appear</p>
  
  <p>CSS</p>
  
  <pre><code>ul.dateNav ul li a {
   display:none;
  }
  
  ul.dateNav ul &gt; li.active &gt; a{
  display:block
  color: red;
  text-decoration: underline;
  }
  </code></pre>
  
  <p>however when scrolling down the page the dates do not appear.</p>
  
  <p>Any help appreciated, would really like to clarify some understanding here.</p>
  
  <p>Thanks</p>
  
  <p>EDIT</p>
  
  <p>ok so have changed as Joe Pym suggested</p>
  
  <pre><code>&lt;li&gt;&lt;% @response.each_pair do |date, movie| %&gt;&lt;%= link_to date_format(date), "##{date}" %&gt;&lt;% end %&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Each date has its own id now which wasnt happening before but still no appearance of the relevant date</p>
  
  <p>HTML now generated</p>
  
  <pre><code>&lt;ul class="dateNav"&gt;
   &lt;li&gt;
   &lt;a href="#2013-01-09"&gt;9th Jan 2013&lt;/a&gt;
   &lt;a href="#2013-01-11"&gt;11th Jan 2013&lt;/a&gt;
   &lt;a href="#2013-01-18"&gt;18th Jan 2013&lt;/a&gt;
   &lt;a href="#2013-01-23"&gt;23rd Jan 2013&lt;/a&gt;
   &lt;a href="#2013-01-25"&gt;25th Jan 2013&lt;/a&gt;
   &lt;a href="#2013-01-30"&gt;30th Jan 2013&lt;/a&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>EDIT for Sara</p>
  
  <p>calling scrollspy</p>
  
  <pre><code>$('#spyOnThis').scrollspy();
  </code></pre>
  
  <p>Nav for dates</p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div class="span12"&gt;
     &lt;div id="dateNav"&gt;
      &lt;ul class="nav dateNav"&gt;
        &lt;li&gt;&lt;% @response.each_pair do |date, movie| %&gt;&lt;%= link_to date_format(date), "#d_#{date}" %&gt;&lt;% end %&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>List of Movies</p>
  
  <pre><code>&lt;div id="spyOnThis"&gt;
    &lt;% @response.each_pair do |date, movie| %&gt;
      &lt;h3 class="resultTitle fontSize13" id="d_&lt;%= date %&gt;"&gt;Available on&amp;nbsp;&lt;%= date_format(date) %&gt;&lt;/h3&gt;
      &lt;% movie.each do |m| %&gt;
        &lt;div class="thumbnail clearfix"&gt;
          &lt;img class="pull-left" src=&lt;% if m.image_link %&gt; &lt;%= m.image_link %&gt; &lt;% else %&gt; "/assets/noimage.jpg" &lt;% end %&gt;&gt;
          &lt;div class="caption pull-right"&gt;
            &lt;%= link_to m.name, m.title_id, :class =&gt; 'resultTitle fontSize11' %&gt;
            &lt;p class="bio"&gt;&lt;%= m.bio %&gt;&lt;/p&gt;
            &lt;p class="resultTitle"&gt;Cast&lt;/p&gt;
            &lt;p class="bio"&gt;&lt;%= m.cast.join(", ") unless m.cast.empty? %&gt;&lt;/p&gt;
            &lt;%= link_to "Remind me", reminders_path(:title_id =&gt; m.title_id), :method =&gt; :post, :class =&gt; 'links button' %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;% end %&gt;
    &lt;% end %&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#spyOnThis {
   height:auto;
   overflow:auto;
  }
  </code></pre>
  
  <p>I set height as auto because the number of results can change every time</p>
  
  <pre><code>ul.dateNav &gt; li.active &gt; a {
  display:block;
  color: red;
  text-decoration: underline;
  }
  </code></pre>