Webアプリケーションにおける「検索→検索結果表示」というページでよくある処理です。本日は「jQueryとcolorboxを使ったajax非同期処理」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。本日は、「jQueryとcolorboxを使ったajax非同期処理」についてです。
ajaxはよくありますが、非同期通信中の「お待ちください」などの表示にcolorboxを使うと非常に楽になるのでオススメです。
要件と仕様
- 検索→結果一覧表示というページにおいて、検索中に「お待ちください」という表示をさせたい
- 実処理を行っているプログラムは既にajaxに対応しているものとする。
※つまり今までは違う「お待ちください」表示をさせていた・または表示させていなかった - 「お待ちください」の表示にはcolorboxを使用する
- 「お待ちください」部分のhtmlコードは、非表示で既にページに埋め込まれている
以上の要件から動作仕様は、
- 「検索」ボタンを押したら処理開始
- colorboxにより「お待ちください」と表示
- 「お待ちください」表示後にajax開始
- ajaxにより検索結果を埋め込み表示したらcolorbox終了
- 検索結果の埋め込み先はidがresultという要素とする とします。
サンプル
やけに生々しいサンプルですが気にしないでください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
//idがbtn_submitという検索ボタンを押した場合に処理開始 $('#btn_submit').click(function(event){ //■■■■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(){ //■■■■ajax実行 $.ajax({ //■オプション指定 //送信メソッドを設定。GETかPOSTだが今回はGETを指定 type: 'GET', //今回はurlにGET時のクエリストリングスを記述しているが、送信データの指定方法は色々ある。 //http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/ //http://semooh.jp/jquery/api/ajax/serialize/+/ url: "hoge.php?val=" + $("#fuga").val(), //レスポンスデータは生の検索結果htmlを想定して、htmlと指定 dataType: 'html', //通信中にユーザーに操作をさせないならfalseを指定する。デフォルトはtrue（操作を許す）。 //async: false, //■urlで指定したプログラムとの「通信が成功した場合」の処理 //※処理が成功した場合ではない success: function(response){ //仮にプログラムがエラー時に「error」と返す処理を実装していた場合は、ここで以降の処理をキャンセルできる。 //必要であればエラーメッセージも表示するのが良いだろう。 if (response == "error"){ return false; } //when～doneを使い順番に処理をさせているが、不要かもしれない。 $.when( //生のhtmlであるレスポンスデータをページに埋め込み $("#result").html(response) ).done(function() { //colorboxを閉じる $.colorbox.close() }); //when～doneが不要な場合は普通に記述。 /* //生のhtmlであるレスポンスデータをページに埋め込み $("#result").html(response); //colorboxを閉じる $.colorbox.close(); */ }, //■urlで指定したプログラムとの「通信が失敗した場合」の処理 error: function(){ alert("エラー：通信に失敗しました。"); } }); } }); }); |
生々しい故に余計な構文・コメントがありますが、あまりこだわる必要がなければ構文はかなり短くなります。書きませんが。
お役に立てば幸いです。
