thickboxでiframeを表示する時のごにょごにょ


やりたいことはthickboxでiframeを表示。
iframe内のformからデータをjsonで受け取ってAjaxで反映させる。

こっち側の実装は
・thickboxを閉じたらjsonを受け取る。
・親画面の内容を更新。
【補足】
iframeからパラメータで付けたidを引数として渡す。
thickboxに関してはモーダルウィンドウ風てことでescキーとoverlay押下時の閉じる制御は行わない。

それでと。。。
1.まずiframe内の各画面に「閉じる」リンクをテスト実装。
引数はiframeで関数呼出し時にパラメータで渡したIDをシステム側から入れてもらうからテストで入れとく。
iframe閉じるための記述例

<a href="javascript:void(0);" onclick="self.parent.tb_remove(self.parent.$j('#hogehoge'));">閉じる</a>

結局子画面だから、self.parent.←これ大事ね。

2.thickboxにidを引き渡したい。単純にid付けたしても渡ってくれなかった。

thickbox.js

//196行目あたりからがiframe用。
//今回はモーダルウィンドウ風なので199行目に?id="+params['id']+"を追加
iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent'
↓
iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"?id="+params['id']+"' id='TB_iframeContent'

3.thickboxを閉じた時用の制御
thickbox.jsを見ていくはめに。。。
ライブラリはあんまりいじりたくないんだけど仕方ない。

thickbox.js

//268行目らへんで閉じる処理をしているようです。
function tb_remove() {
 	$j("#TB_imageOff").unbind("click");
	$j("#TB_closeWindowButton").unbind("click");
	$j("#TB_window").fadeOut("fast",function(){$j('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind()
.remove();});
	$j("#TB_load").remove();
	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
		$j("body","html").css({height: "auto", width: "auto"});
		$j("html").css("overflow","");
	}
	document.onkeydown = "";
	document.onkeyup = "";
	return false;
}

ここに閉じたとき用の関数とパラメータで渡す引数を付け足し。
↓↓こんな感じ??

function tb_remove(paramID) {
 	$j("#TB_imageOff").unbind("click");
	$j("#TB_closeWindowButton").unbind("click");
	$j("#TB_window").fadeOut("fast",function(){$j('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind()
.remove();});
	$j("#TB_load").remove();
	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
		$j("body","html").css({height: "auto", width: "auto"});
		$j("html").css("overflow","");
	}
	document.onkeydown = "";
	document.onkeyup = "";
	layerClose(paramID);//これで閉じてから親画面処理用の関数呼び出し
	return false;
}

4.親画面でJSON受け取って更新処理

function layerClose(paramID){
	var reloadId = $j(paramID);
	var targetName = $j(paramID).children("a").attr("name");
	var nameAry = targetName.split("_");
	var objName = nameAry[0];
	var frameData;
	if(objName == 'image'){
		frameData = '/hogeData.json';
	} else if (objName == 'list') {
		frameData = '/hageData.json';
	}
	$j.getJSON(frameData, {dataType: objName, ajax: 'true'}, function(json){
		dataReload(frameData,reloadId,objName,json);
	});	
}

getJSONの中身は第2引数はオプションなんで付けても付けなくてもOKだそうです。
第1引数で渡したjsonがgetできてれば次のfunction(json)が実行されるイメージ。

んで、次にgetJSONが成功した時の関数。

function dataReload(data,id,name,j){
	var innerHTML = '';
	if(name == 'list'){
		for(var i = 0 ; i &lt; j.length; i++){
			innerHTML += '&lt;li&gt;' + j[i].data + '&lt;a href="#"&gt;削除&lt;/a&gt;&lt;/li&gt;';
		}
		$j(id).children("ul.addlist").append(innerHTML);	
	}else if(name == 'image'){
			for(var i = 0 ; i &lt; j.length; i++){
				innerHTML += '&lt;img src="' + j[i].dataURL + '" width="' + j[i].dataWidth + '" height="' + j[i].dataHeight + '" /&gt;&lt;br /&gt;';
			}
		$j(id).children("span").html(innerHTML);	
	}
}

ちなみに親画面のHTMLソースはこんな感じ
その1

<p id="hogehoge"><span>写真</span><a href="/hoge/index.html?keepThis=true&TB_iframe=true&height=400&width=600&modal=true&id=hogehoge" class="thickbox" title="画像選択" id="image_001" name="image_001">画像選択</a></p>

その2

<div id="hagehage"><ul class="addlist">
<li>テスト<a href="#">削除</a></span></li>
<li>テスト<a href="#">削除</a></span></li>
<li>テスト<a href="#">削除</a></span></li>
<li>テスト<a href="#">削除</a></span></li>
<li>テスト<a href="#">削除</a></span></li>
</ul>
<a href="/hoge/add.html?keepThis=true&TB_iframe=true&height=400&width=600&modal=true&id=hagehage" class="thickbox" title="追加" id="list_001" name="list_001">追加</a></div>
//補足・thickboxを呼び出すURLに&modal=trueを付け足すことでモーダルウィンドウになります。

Posted in Web-tips by prolography at 10月 31st, 2009 .
Tags: ,
海外現地オプショナルツアーなら【VELTRA(ベルトラ)】
ケンコーコム