title: Why does JQuery fail to return the first Mustache template in the Trigger.io weather tutorial?
body: <p>I'm attempting to make it through the weather tutorial for Trigger.io.</p>
  
  <p>I'm developing on Mac OS X (Lion) using the latest release version of Chrome.</p>
  
  <p>I'm in the 2nd part of the tutorial, where JQuery and Mustache are introduced.</p>
  
  <p>The Mustache templates are in the  of the index.html as follows:</p>
  
  <pre><code>&lt;body&gt;    
      &lt;script type="x-mustache-template" id="forecast_information_tmpl"&gt;
          &lt;h1&gt;Forecast for {{display_location.full}}&lt;/h1&gt;
          &lt;p&gt;{{observation_time}}&lt;/p&gt;
      &lt;/script&gt;
  
      &lt;script type="x-mustache-template" id="current_conditions_tmpl"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;img src="{{icon_url}}" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;{{weather}}&lt;/div&gt;
                      &lt;div&gt;{{temp_f}}&amp;deg;F&lt;/div&gt;
                      &lt;div&gt;Humidity: {{relative_humidity}}&lt;/div&gt;
                      &lt;div&gt;Wind: {{wind_string}}&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/script&gt;
  
      &lt;script type="x-mustache-template" id="forecast_conditions_tmpl"&gt;
          {{#forecastday}}
              &lt;td&gt;
                  &lt;h2&gt;{{date.weekday_short}}&lt;/h2&gt;
                  &lt;img src="{{icon_url}}"&gt;
                  &lt;div&gt;{{conditions}}&lt;/div&gt;
                  &lt;div&gt;Low: {{low.fahrenheit}}&amp;deg;F&lt;/div&gt;
                  &lt;div&gt;High: {{high.fahrenheit}}&amp;deg;F&lt;/div&gt;
              &lt;/td&gt;
          {{/forecastday}}
      &lt;/script&gt;
  
      &lt;header id="forecast_information"&gt;&lt;/header&gt;
  
      &lt;section id="current_conditions"&gt;&lt;/section&gt;
  
      &lt;section id="forecast_conditions"&gt;
          &lt;table&gt;
              &lt;tr&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When the first template in the body is requested in the weather.js code, the call fails to return.  The template is not properly retrieved and the output is not created as expected.</p>
  
  <p>For example, given the code above, if I attempt to execute the following:</p>
  
  <pre><code>tmpl = $("#forecast_information_tmpl").html();
  </code></pre>
  
  <p>The jQuery call fails to return a valid object for tmpl.</p>
  
  <p>If I swap the order of the  sections above, attempting to retrieve the first template will fail.</p>
  
  <p>If I comment out the request for the first template, the code successfully retrieves the next two templates.</p>
  
  <p>If I move the request for the first template past the requests for the other templates, the request for the first template fails.</p>
  
  <p>It seems to be a purely positional challenge: the first template in the index.html file can't be retrieved.</p>
  
  <p>Initially, I typed in the tutorial code and downloaded the latest versions of JQuery and Mustache.  After running into trouble, I downloaded the tutorial source, including the versions of jQuery and Mustache that are part of the tutorial package.  No change in behavior.</p>
  
  <p>Not sure if anyone else has bumped into this or if anyone has suggestions on how to debug it or get around it.</p>