title: Using Javascript to load .tpl displays it wrong
body: <p>I am trying to load some code with Javascript on a button click. The problem is that some of the code is just displayed instead of executed.</p>
  
  <p>This is the file reload.tpl I am trying to load:</p>
  
  <pre><code>&lt;div class="online-players"&gt;
    {% for player in players_online %}
    &lt;div class="online-player-heads"&gt;
      &lt;a href="?page=player&amp;name={{ player.getName }}"&gt;
          {{ player.getPlayerHead(64, 'img-polaroid', true)|raw }}
      &lt;/a&gt;
    &lt;/div&gt;
  {% else %}
    &lt;div class='force-center'&gt;&lt;em&gt;{{ 'no_players_online'|trans }}&lt;/em&gt;&lt;/div&gt;
  {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>I use this to load the code:</p>
  
  <pre><code>&lt;script&gt; 
      $(document).ready(function() {
          $('#button2').click(function() {
              $('.online-players').fadeOut('slow', function() {
                  $(this).load('templates/default/views/reload.tpl', function() {
                      $(this).fadeIn("slow");
                  });
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Expected:</p>
  
  <p><a href="http://i.stack.imgur.com/CRMGn.png" rel="nofollow">http://i.stack.imgur.com/CRMGn.png</a></p>
  
  <p>What actually is happening:</p>
  
  <p><a href="http://i.stack.imgur.com/8UvG7.png" rel="nofollow">http://i.stack.imgur.com/8UvG7.png</a></p>
  
  <p>Anyone knows why it's doing this? When I am not trying to load through a script it's working just fine. but as soon as I try the .load, it just doesnt display right..
  Help? :)</p>