jQuery tmplプラグインに問題があります。一部のHTMLをAJAX経由で読み込むと、スクリプトタグ内のjQueryテンプレートが消えます
試してみるべきテストケースです(console.logのため、FirebugなしのInternet Explorerでは動作しません)。
ファイルajaxed_tpl.html:
<div id="some_inner">
<script id="my_tmlp" type="text/x-jquery-tmpl">
<li>
<img src="${imgSource}" alt="image" />
<h2> ${username} </h2>
</li>
</script>
<script type="text/javascript">
alert('I am here!');
</script>
</div>
<div> I don't need this through AJAX</div>
test.htmlという:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
</head>
<body>
<div id="response_cont"></div>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "ajaxed_tpl.html",
cache: false,
success: function(data) {
// it is ok if I fill entire data into HTML
$("#response_cont").html(data);
console.log($("#my_tmlp").html());
}
});
</script>
</body>
</html>
この1つの負荷が罰金 - 私は(警告およびテンプレートのHTMLを取得するには)OKに見えます。
しかし、私は「私はAJAXを通してこれを必要としません」という行も得ています。だから明らかにdiv id = "some_inner"の内部だけをロードする必要がありますが、Javascriptを実行する必要があるので、some_inner divを取得する前にDOMにデータを挿入するしかありません。
それでは、test.htmlというビットを変更してみましょう:テンプレートは行かなかった
success: function(data) {
// I need only the certain element with all the scripts and templates inside
var evaledHtml = $("<div>").html(data).find("#some_inner").html();
$("#response_cont").html(evaledHtml);
// at this point Javascripts got executed, I get that alert()
console.log($("#my_tmlp").html());
// but the template script is gone - console logs null!!!
}
ああ、男、?なぜスクリプトタグのJavascriptが実行されたのですが、スクリプトタグのテンプレートはなくなりましたか?
しかし、今のはajaxed_tpl.htmlでテンプレートを変更してみましょう:
<div id="my_tmlp" style="display:none;">
<li>
<img src="${imgSource}" alt="image" />
<h2> ${username} </h2>
</li>
</div>
をして、再度test.htmlというを実行します。わーい!今回は、console.logがテンプレートを出力します!それは、それがdivタグにある場合は、それが引き裂かれないようだ。
しかし、問題があります。
<img src="$%7BimgSource%7D" alt="image">
は、ブラウザのエンコードせずにテンプレートを右に(ロードする方法はあります:私はスクリプトでのdivにテンプレートを入れていない場合は、ブラウザが私の
<img src="${imgSource}" alt="image" />
をsrewsようなので、今それが見えますAJAXで受け取ったデータの一部だけを読み込んだとしても、それらの$ {}はどうですか?
なぜテンプレートスクリプトタグがリッピングされ、誰がそれを実行しているのですか - ブラウザまたはjQuery?
'$("#response_cont ")。html($("#some_inner "、data));'で 'evaledHTML'行を置き換えた場合はどうなりますか? –
'console.log()'はChromeでも動作します(Safariと仮定しています)。 –
@David - 現在のアプローチでは、ブラウザごとに異なる.innerHTMLを使用しています。別のものを削除します:) –