skillup

技術ブログ

JavaScript

ajaxがらみのイベントの発動とwhenに関して

投稿日:2019年3月24日 更新日:

実務で住所のプルダウンを実装する機会がありました。

[東京都][中央区][明石町]

みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。

これを実装するときのポイントですが、新規保存よりも編集の方が難しいです。

編集時には親の値を意識したプルダウンのリストを持っている必要があります。

今回でいうと[中央区]には市区町村のプルダウンが入ります。

このプルダウンは親(今回でいうと東京都、つまりは都道府県)に依存するため、親の値を意識したリストを持っている必要があります。

実装方法としては2つあります。

  1.  親の値を意識したプルダウンリストをプログラム側で保持しておく
  2.  画面読み込み時にJavaScriptで親の値を擬似的に選ぶ(changeイベントの発火)

1がスタンダードな方法ですが、項目数が少ない場合には2の方が簡単だったりします。

書き方ですが下記のような方法でいけます。

上記のような書き方でイベントが発火しますので、画面が読み込まれた時にJSが発動して、連動プルダウンが動きます。

注意点としてはプルダウンの連動の場合、非同期であることを忘れてはいけません。要は

[東京都][中央区][明石町]

のような場合、

都道府県のchangeイベントが発生し、それを受けて次に市区町村のchangeイベントが発生し、最後に町村のchangeイベントが発現します。

この場合、親のイベントが終わったことを受けて、子供がイベントをキャッチしないといけませんが、普通に下記のように書くと非同期のために親が終わらないうちに子の処理が始まってしまいます。

この場合、親の処理を終えた後に子の処理を動かしたい場合ですが、whenを使って下記のように書くことができます。

詳しい仕様は調べ中ですが、Promiseなどと近い感じで非同期処理をかけるようです。

これだとプログラム側で親の値を意識したプルダウンを書かなくてもいいので楽ですね。

欠点としては画面の項目数が多いとものすごい遅延してしまって、実用には耐えられないことですかね・・・今回の要件では結局10箇所ぐらいに同一のプルダウンがあったため、没になり、プログラム側でリストを作る手法を選びましたが覚えておいて損はなさそうです。

*注意点

上記の処理の場合、同一のイベントが画面内に複数ある場合、when〜以下の処理は関数でひとまとまりにしてあげないとうまく連動しません。(実行順番が保証されないようです。)

このように書いてはダメで、

下記のように書かないといけません。

参考URL

jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ

 

 

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

JSがらみでちょっとした小ネタを。 Contents1 プルダウン連動2 動的要素へのイベント追加(ライブラリのイベントなど) プルダウン連動 大カテゴリ→小カテゴリなどとあった場合に、新規だけではな …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

アーカイブ