メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

$.ajaxでステータスコード200なのにerrorで処理される

掲題の通りの現象なのですが、
$.ajaxでアクセス自体はstatus 200で返っているのに
errorが呼び出されることがありました。

例だと dataType:'xml' でアクセスしていることがわかると思います。
レスポンスがjsonの場合は dataType:'json' と書かないと error: function(data){ の方が呼ばれてしまいます。

f:id:ryoichi0102:20160126002237p:plain

でもそもそもjQueryajaxは今はDeferredな書き方が推奨されてますのでsuccess/errorよりも

$.ajax({
  type: 'GET',
  url: '〜〜〜',
  dataType: 'json',
}).done(function(data) { // success

}).fail(function(data) { // error

});

と書くのが良いですね。

ちなみに、done/failで書くとdataTypeが違ってもstatus:200であれば
doneが呼ばれるようです。

参考:
stackoverflow.com

HTML5の<input type="number" />をjQueryで値取得した場合

HTML5には <input type="number" /> が追加された

このような感じで書けるんです。

min,max設定ができたり、上下キーでインクリメント/デクリメントできるのが良いですね。

jQueryで値取得すると

f:id:ryoichi0102:20160120094041p:plain

typeofで取っても <input type="text /> と同じくstringなんですね。

jQuery 2.2/1.12の新機能を試す(uniqueSort編)

名前変わっただけ

新機能…といってもuniqueSortに関しては
 unique()のわかりやすさのために追加された同じ動作のメソッド
なんですよね。

unique() と uniqueSort() で動きが変わらないことが確認できると思います(笑)
公式では uniqueSort() の使用が推奨されますので
何かのタイミングでいっきにリファクタリングすべきでしょう。

そもそもunique()とは

せっかくなので、そもそもの unique() の動作についてですが
通常の配列ソートと違って、DOMに登場する順番に並び替える動作、となっています。

サンプルソースのdiv郡では、 z y x a y と敢えて逆にならべつつ y を重複させてみました。
また、JavaScript内で逆順に並べ替えた後 x をまた追加しています。
つまりインスタンス化後のelementsは yaxyz x といった形になります。
これを、uniqueでDOM登場順に並び替え、また重複を排除します。
(この場合、div郡内の2つのyはDOM的には別物ですので、重複とは見なされません)

f:id:ryoichi0102:20160119082359p:plain

おまけ

ちなみにjQueryで配列をコピーする場合は

var destArrayInstance = $.extend(true, [], arraySource);

と書くと良いでしょう。

jQuery 2.2/1.12 リリース概要

jQuery 2.2 / 1.12 に加えて、jQuery Migrate 1.3.0 がリリースになっています。

jQuery 2.2 and 1.12 Released | Official jQuery Blog
jQuery Migrate 1.3.0 Released | Official jQuery Blog

まとめると

何かの機能が使えなくなるということはなく、
次に上げる新機能とパフォーマンス改善がメイン。

新機能

  • SVGクラスのサポート
  • Symbol/iterator support
  • jQuery.htmlPrefilter()
  • jQuery.unique() を jQuery.uniqueSort() に名称変更
    (わかりやすさのための変更。今バージョンではunique()はまだ使える。)

パフォーマンス改善

  • ネイティブのquerySelectorAllやmatchesSelectorで取れない場合、
    Sizzleセレクター利用によるセレクターのパフォーマンス改善

サポート

1.x系はIE 6/7/8サポート。
2.x系はそれらをサポートしていない。
…ここは前バージョンと変わらずですね。

となっているようです。

bit.ly

bit.ly

jQuery 2.2/1.12の新機能を試す(Symbol/iterator編)

jQuery 2.2 / 1.12 が2016/1/8にリリースされてました。

その中の新機能の1つであるES6/ES2015のSymbol/iteratorを書いてみました。

for (要素 of 配列)

で書けるようになりましたね!