colorboxでなんちゃってajax

jQuery web制作 プログラミング

広報:齊藤 メイ 広報:齊藤 メイ

Posted on 2017年05月25日(木)22:54
Updated on 2017年05月25日(木)19:46


colorboxでなんちゃってajax

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

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

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

要件と仕様

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

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

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

サンプル

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

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


いかがでしたでしょうか?
猫ITソリューションズは、飼い主の皆さんにITを活用しあらゆるシーンで的確なアドバイスをいたします。それではまたお会いしましょう。

colorboxでなんちゃってajax

see you!

 

本件に関するお問い合わせ先

猫ITソリューションズ

049-290-8502
お問い合わせフォーム



Member Profile

広報:齊藤 メイ

埼玉在住の三毛猫です。趣味は日向ぼっこ、好きな猫缶はカツオ系です。仲良くしてくださいね!

Facebook
Twitter

代表:齊藤 智宏

埼玉在住のWebデベロッパーです。80's洋楽、映画、レトロゲームが大好きです。よろしく!

Facebook
Twitter

Contact

ご意見、ご相談などお気軽にお問い合わせ下さい。お問い合わせ内容の確認後、担当者よりご連絡させていただきます。

049-290-8502
お問い合わせフォーム