ほんじゃらねっと

ダイエット中プログラマのブログ

Thickboxで呼び出し元ウィンドウとデータのやりとり

プログラミング jquery Javascript

他に方法が思いつかなかったので、親ウィンドウ側に関数を用意して
それをThickbox側から呼び出す方法をとった。


iframe版しか考えていないので、ajax版の使い方だとまた別の方法があると思う。


parent.html

<head>
  ...
  <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  <link rel="stylesheet" href="thickbox.css" type="text/css" />
  <script type="text/javascript" src="thickbox-compressed.js"></script>
  <script type="text/javascript" src="parent.js"></script>
  ...
</head>
<body>
...
<a href="/path/to/child/?pre_callback=pre_func&post_callback=post_func&TB_iframe=True&height=400&width=400" class="thickbox" title="サブウィンドウ">サブウィンドウを開く</a>
...
</body>


parent.js

var remote_func = {
pre_func: function () {
return ["param_data1", "param_data2", "param_data3"];
},
post_func: function (returned_data) {
...
}
};


views.py

...
def show_child(request):
pre_callback_func = request.GET["pre_callback"]
post_callback_func = request.GET["post_callback"]
return render_to_response('child.html', {"pre_callback_func": pre_callback_func, "post_callback_func": post_callback_func}, context_instance=RequestContext(request))
...


child.html

<head>
  ...
  <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  <script type="text/javascript" src="child.js"></script>
  ...
</head>
<body>
...
<div id="pre_func">{{ pre_callback_func }}</div>
<div id="post_func">{{ post_callback_func }}</div>
...
</body>


child.js

$(document).ready(function () {
$("#exec-btn").click(function (e) {
var callback_func = $("#post_func").val();
if (callback_func.length > 0) {
window.parent.remote_func[callback_func](return_data);
}
window.parent.tb_remove();
});
var pre_func = $("#pre_func").val();
if (pre_func.length > 0) {
var param_data = window.parent.remote_func[pre_func]();
...
}
});