jQuery UI TabsとjQuery Form Plugin2

前の時に書いたjQuery UI TabsとjQuery Form Pluginではタブの遷移先のHTMLやjspに特定のJavaScriptを埋め込む必要があった。やはりこれだと面倒なので親画面(タブがある画面)で読み込み先をajaxForm化する方法を考えてみた。Aタグもonclickでloadするようにしてみた。loadでnoCacheというパラメータを指定しているのはPOSTで画面を取得するため(loadはパラメータを1つでも指定するとPOSTでリクエストする仕様)。GETでリクエストするとキャッシュが表示されてしまうことが多かった。

var currentPanel;
function ajaxLink() {
	$(currentPanel).load(this.href, {'noCache': '1'}, function() {
		$('a', currentPanel).click(ajaxLink);
		$('form', currentPanel).ajaxForm({target: currentPanel, complete: ajaxForm});
	});
	return false;
}
function ajaxForm() {
	$('a', currentPanel).click(ajaxLink);
	$('form', currentPanel).ajaxForm({target: currentPanel, complete: ajaxForm});
}
function tabChanged(e, ui) {
	currentPanel = ui.panel;
	ajaxForm();
}
$(document).ready(function() {
	$("#tab > ul").tabs( {fx : {opacity :'toggle'}, load: tabChanged});
});

これで後はタブの中のコンテンツ自体はタブ化されていることを意識しなくても作成できるようになった(はず)。