親ページの要素をAJAXを使って読み込む

質問

親ページのリンクをクリックして子ページへと遷移する際に子ページ上に親ページの一部の要素を表示したく、下記のような処理を子ページに埋め込みました。

<script type="text/javascript">
$(function(){
$.ajax({
type: 'GET',
url: '親ページのrootパス/index.html',
dataType: 'html',
success: function(data) {
$("#tableArea").append($("#table01",data).html());
},
error:function() {
alert('Any problem has occured!');
}
});
});
</script>

テストサーバへアップし、Chromeで動作確認のため、consoleで$("#table01",data).html()の値を表示させると空っぽで何もなく、子ページにも表示されません。

$(data)だけでconsoleに表示させると、親ページのDOMが出力されます。

問題解決方法についてご教授頂けると幸いです。

回答No.2

anmochi

おろ。うーん・・・・じゃあこっちはどうだろう。

$("#tableArea").append($("#table01",$(data)).html());
↓
$("#tableArea").append($(data).find("#table01").html());

お礼

お返事ありがとうございます。

最終的に下記のやり方で解決できました。
http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/src-1/

いろいろとお力添え頂き感謝いたします。

回答No.1

anmochi

こうするとどうだろう。

<script type="text/javascript">
$(function(){
$.ajax({
type: 'GET',
url: '親ページのrootパス/index.html',
dataType: 'html',
success: function(data) {
$("#tableArea").append($("#table01",$(data)).html());
},
error:function() {
alert('Any problem has occured!');
}
});
});
</script>

お礼

anmochi様、回答ありがとうございます。

$('XXX')の中に$('XXX')って内包できるんですか！？
知らなかったです。
休み明けに試してみたいと思います。

補足

anmochi様

ご提示いただいた手法で試してみましたが、結果変わらずでした。