colorboxでなんちゃってajax

Sync(同期)なページをAsync(非同期)に見せかけたい場合に役に立ちます。そもそもそういう要件は少ないと思いますが、、、本日は「colorboxでなんちゃってajax」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。本日は、「colorboxでなんちゃってajax」についてです。

本記事を書くにあたり以下サイトを参考にさせていただきました。貴重な情報の提供に感謝いたします。
jQueryでフォームの送信を一旦止め、処理を挟んでから送信する方法 – モンキーレンチ

要件と仕様

検索→結果一覧表示というページにおいて、検索中に「お待ちください」という表示をさせたい
ただしphpなど実処理を行っているプログラムは修正しない
「お待ちください」の表示にはcolorboxを使用する
「お待ちください」部分のhtmlコードは、非表示で既にページに埋め込まれている

以上の要件から動作仕様は、

「検索」ボタンを押す等してsubmitしたら、submitを検知して処理開始
処理開始後にsubmitを一度キャンセルし、colorboxにより「お待ちください」と表示
「お待ちください」表示後に1秒遅れで改めてsubmitを実行
「そのままの画面で」検索処理が行われ、その後検索結果を表示。当然「お待ちください」は表示されない。

サンプル

やけに生々しいサンプルですが気にしないでください。

//submitするform要素のname値を指定
var form = $('form[name=main]');

//submit検知
form.submit( function( e ) {
	
	//colorbox実行
	$.colorbox({

		//■オプション指定

		//「お待ちください」のページ内要素。この場合はidがui_waitという要素。
		href:"#ui_wait",

		//「お待ちください」の表示幅
		width:"640px", 

		//「お待ちください」の表示高さ
		height:"480px",

		//ページ内要素なのでinlineを指定
		inline:true,

		//colorbox標準機能の「閉じるボタン」を表示させない
		closeButton:false,

		//colorbox標準機能の「領域外クリックで閉じる」を無効にする
		overlayClose:false,

		//colorbox表示時の動きを「アニメーションなど無しでいきなり表示させる」様にする
		transition:"none",

		//（上記指定により不要かもしれないが）表示するまでの速さを指定
		speed:1,

		//■colorboxのコンテンツをロードする前に行う処理
		onLoad:function(){

			//非表示設定であるui_waitを表示設定にする
			$('#ui_wait').show();

		},
		//■コンテンツが表示された直後に行う処理
		onComplete:function(){

			//1秒遅れで同じ処理が二度走らないように、submitイベントを消してからsubmit
			setTimeout( function() {
                form.off( 'submit' );
                form.submit();
            }, 1000);
			
		},
	});

	//自動でsubmitされないように処理を止める
    return false;

} );

//submitするform要素のname値を指定

var form = $('form[name=main]');

//submit検知

form.submit( function( e ) {

//colorbox実行

$.colorbox({

//■オプション指定

//「お待ちください」のページ内要素。この場合はidがui_waitという要素。

href:"#ui_wait",

//「お待ちください」の表示幅

width:"640px",

//「お待ちください」の表示高さ

height:"480px",

//ページ内要素なのでinlineを指定

inline:true,

//colorbox標準機能の「閉じるボタン」を表示させない

closeButton:false,

//colorbox標準機能の「領域外クリックで閉じる」を無効にする

overlayClose:false,

//colorbox表示時の動きを「アニメーションなど無しでいきなり表示させる」様にする

transition:"none",

//（上記指定により不要かもしれないが）表示するまでの速さを指定

speed:1,

//■colorboxのコンテンツをロードする前に行う処理

onLoad:function(){

//非表示設定であるui_waitを表示設定にする

$('#ui_wait').show();

//■コンテンツが表示された直後に行う処理

onComplete:function(){

//1秒遅れで同じ処理が二度走らないように、submitイベントを消してからsubmit

setTimeout( function() {

form.off( 'submit' );

form.submit();

}, 1000);

});

//自動でsubmitされないように処理を止める

return false;

} );

なおサンプルでは「1秒後」としていますが、colorboxの表示が完全に完了する前にsubmitが実行されると中途半端な表示のままsubmitが実行されて見た目が少しおかしくなります。2秒後とかにした方がいいかもしれませんが、そもそもなんちゃってのためにユーザーを＋2秒も待たせていいのかという問題もありますので、クライアント様に確認してから設定してください。