jQueryとcolorboxを使ったajax非同期処理

jQuery web制作 プログラミング

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

Posted on 2017年05月26日(金)07:05


jQueryとcolorboxを使ったajax非同期処理

Webアプリケーションにおける「検索→検索結果表示」というページでよくある処理です。本日は「jQueryとcolorboxを使ったajax非同期処理」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「jQueryとcolorboxを使ったajax非同期処理」についてです。

ajaxはよくありますが、非同期通信中の「お待ちください」などの表示にcolorboxを使うと非常に楽になるのでオススメです。

要件と仕様

  • 検索→結果一覧表示というページにおいて、検索中に「お待ちください」という表示をさせたい
  • 実処理を行っているプログラムは既にajaxに対応しているものとする。
    ※つまり今までは違う「お待ちください」表示をさせていた・または表示させていなかった
  • 「お待ちください」の表示にはcolorboxを使用する
  • 「お待ちください」部分のhtmlコードは、非表示で既にページに埋め込まれている

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

    1. 「検索」ボタンを押したら処理開始
    2. colorboxにより「お待ちください」と表示
    3. 「お待ちください」表示後にajax開始
    4. ajaxにより検索結果を埋め込み表示したらcolorbox終了
    5. 検索結果の埋め込み先はidがresultという要素とする
    6. とします。

サンプル

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

生々しい故に余計な構文・コメントがありますが、あまりこだわる必要がなければ構文はかなり短くなります。書きませんが。

お役に立てば幸いです。


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

jQueryとcolorboxを使ったajax非同期処理

see you!

 



Blog Categories

Member Profile

広報:齊藤 メイ

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

Facebook
Twitter

代表:齊藤 智宏

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

Facebook
Twitter