Templates in script tags disappear when loading partial HTML through AJAX

Templates in script tags disappear when loading partial HTML through AJAX

I have a problem with jQUery tmpl plugin.

Here is a test case for you to try (because of console.log it works only on Firefox with Firebug).

A file ajaxed_tpl.html:
  1. <div id="some_inner">
  2. <script id="my_tmlp" type="text/x-jquery-tmpl">
  3. <li>
  4. <img src="${imgSource}" alt="image" />
  5. <h2> ${username} </h2>
  6. </li>
  7. </script>

  9. <script type="text/javascript">
  10. alert('I am here!');
  11. </script>
  12. </div>
  13. <div> I don't need this through AJAX</div>

Now let's play.
test.html:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="js/jquery.js"></script>
  6.         <script type="text/javascript" src="js/jquery.tmpl.js"></script>
  7. </head>
  8. <body>
  9. <div id="response_cont"></div>
  10. <script type="text/javascript">
  11.           
  12. $.ajax({
  13.  type: "GET",
  14.  url: "ajaxed_tpl.html",
  15.  cache: false,
  16.  success: function(data) {

  18. // it is ok if I fill entire data into HTML
  19. $("#response_cont").html(data);
  20. console.log($("#my_tmlp").html());
  21. }
  22. });
  23.         </script>
  24.     </body>
  25. </html>
This one loads fine - I get the alert and the template html() looks ok.


But I also get the "I don't need this through AJAX" line. So obviously I need to load just the inner part of  div id="some_inner" but also I need to execute the Javascripts, so the only way to do it is to insert data into DOM before I get the some_inner div.

So let's modify test.html a bit:

  1. success: function(data) {
  2. // I need only the certain element with all the scripts and templates inside
  3. var evaledHtml =  $("<div>").html(data).find("#some_inner").html();
  4. $("#response_cont").html(evaledHtml);
  6. // at this point Javascripts got executed, I get that alert()
  7. console.log($("#my_tmlp").html());
  8. // but the template script is gone - console logs null!!!  
  9. }
Oh, man, where did the template go? Why Javascript in script tags got executed, but the template in script tags is gone?

But now let's modify the template in ajaxed_tpl.html:

  1. <div id="my_tmlp" style="display:none;">
  2. <li>
  3. <img src="${imgSource}" alt="image" />
  4. <h2> ${username} </h2>
  5. </li>
  6. </div>
and run the test.html again. Yay! This time console.log outputs our template! It seems, if it is in div tags, it is not ripped out.

But there is a problem. If I put the template in div and not in script, the browser srews up my 
  1. <img src="${imgSource}" alt="image" />
so now it looks like:
  1. <img src="${imgSource}" alt="image"> 
Is there any way to load the template right (without browser encoding those ${} )  even if I load only part of data received through AJAX?

Why are those template script tags ripped out and who is doing that - browser or jQuery?