ぷ~ろぐぷ~ろぐ身辺雑記、アニメ・マンガ、Jリーグ(特に新潟)のこととか。2015JSONのオブジェクトは順序性を持たないjQueryでリクエストを投げてPHPで配列のデータをJSON形式で返すアプリケーションを考える。サーバ側のプログラムのサンプル。json_encode($data);クライアント側のプログラムのサンプル。POSTパラメータでサーバ側では使っていないが、Ajaxでサーバ側にパラメータを渡す例として書いておいた。#Firefoxの場合。他のブラウザでは試していない。PHPの配列をJSONのオブジェクトに変換してしまうためである。実際のレスポンスのボディは以下のようになっている(デコードしてインデントを付けている)。}}これは3つのプロパティを持つJSONオブジェクトであり、配列ではないのでプロパティに順序なんてない。実際の出力の順序を見るとプロパティ名の降順で出力しているように見える。使うのをやめて、PHPの配列を受け取ってJSON形式の配列を返す処理を自前で書けばいい。修正したコードを以下に示す。汎用的なものではなく、配列のデータの形式が決まっているものとしてその形式だけにとりあえず対応したものである。"json");修正後のレスポンスのボディは以下のようにオブジェクトではなく配列となっている。サーバ側のPHPの配列の順序どおりになる。2014HTML全体からjQueryオブジェクトを作成、find()とfilter()の違いjQueryを使っていて予想と違っていたことがあったので検証した。使用したブラウザはFirefox32と33。以下のようなhtmlのデータがある。表示のスクリーンショットはわかりやすいようにcssを付けてある。borderが破線になっているブロック要素はoptionクラスが付いている。抜き出すJavaScriptコードを含むHTMLファイルと初期表示のスクリーンショットを以下に示す。</form></section></body></html>ボタンを押すとAjaxで最初に示したHTMLデータを取得し、そのデータからjQueryオブジェクトを作成する。optionクラス付きの要素を取得して表示している画面に追加する。中身をfirebugsで見ると以下のようになっている。HTMLページ全体のデータからjQueryオブジェクトを作ると、head要素とbody要素の直下の要素が並んでいるのがわかる。head要素とbody要素は含まれていない。HTMLの構造そのままのjQueryオブジェクトが出来ると予想していたけど違った。ないのかはよくわからないが、とりあえずそういうものだと思っておこう。findボタン押下(find()実行)後、filterボタン押下(filter()実行)後、それぞれ以下のようになる。class="option">s5</section>である。find()jQueryオブジェクトの直下の要素の子孫要素から要素を選択する。直下の要素は対象外である。選択処理の対象外であり、それらの子孫要素が選択の対象となる。直下より下の子孫要素すべてから指定した条件の要素を選択する。filter()直下の要素から選択する。それらの子孫は対象外である。選択処理の対象となる。呼び出し元のjQueryオブジェクトの集合から引数のセレクタに合うものだけを残し、合わないものはふるい落とす。名前の通りフィルタリングすると覚えるといい。セレクタ1を要素セレクタ、セレクタ2をクラスセレクタまたは属性セレクタとすると$(【セレクタ1】【セレクタ2】)と$(【セレクタ1】).filter(【セレクタ2】)は同じになる。2014jQueryのセレクタについてメモ基本だけどよく忘れるのでメモ。セレクタでマッチした要素の存在チェックやり方はいくつかあるようだが、自分としては下記のやり方が一番わかりやすいかなと。0逆に「セレクタにマッチする要素がない」という条件は次のように書ける。否定のセレクタ:not(セレクタ)属性セレクタのand以下のように書くと属性セレクタを間を空けずに連続して書くと、属性セレクタを条件をANDで連結したセレクタとなる。UIで選択リスト拡張するライブラリ。選択リストで複数選択可能な場合、便利そうだなと。配列形式にしないと選択された項目をすべて取得することができない。ファイルは以下のように配置した。画像を指定している部分のパスを書き換えた。いうのも含まれているが、なくても特にエラーにならなかった。└select2.min.js2つの項目を選択すると下のようになる。選択を解除するには項目名のラベルにある×印をクリックする。ここで、入力フィールドをクリックすると、選択リストは下のようになる。選ばれている項目は選択肢から取り除かれている。入力フィールドに文字を入力すると、その文字によって下のよう選択肢が絞り込まれる。現在選択されている項目をjQueryで以下のように取得できる。val属性の値を取得するということか。$("#select2Test").select2("val"));選択するコードは以下になる。1個だけ選択するなら第2引数を配列にする必要はない。使ったページを触ってみたら、選択肢が日本語だと選択肢の絞込みはできないようだった。ような「前方一致指定(肯定後読み)」が使えなかった。(肯定先読み)」は普通に使えた。2014Deferredで無限ループしてポーリング以前の関連する記事:jQueryで非同期な処理が終わるのを待つにはDeferredを使うDeferredの復習Deferredの復習2:jQueryのAjax関数はPromiseを実装したjqXHRを返す「一定間隔でポーリングして処理の進行状況をチェックし、処理中ならば『処理中です』と画面に表示し、処理が終わったらポーリングをやめて『処理が完了しました』と表示させる。」というようなことをやりたい。参考ページにDeferredを使った無限ループの実装があったので、それをベースにして考えてみた。スリープ関数とその使用例。