ariyasacca

▼ [雑記]jQuery 1.4でjQuery.param()の変更点に気を付けないとjQuery.ajax()が動かなくなることがある

jQuery 1.4がリリースされましたが、jQuery.param()の変更点が割とドラスティックで、少しハマってしまったのでメモしておきます。

オブジェクトからクエリストリングを作る場面の動作が、デフォルトでRailsライクなシリアライズ(Redmineのチケット一覧を絞り込む時のパラメータの様に、ネストしたオブジェクトや配列を展開)をするようになりました。

どうもオブジェクトのプロパティを列挙してFunction型だった時に、windowスコープで実行結果を取りに行くっぽいです。

jQuery.param()の第2引数traditionalにtrueを指定すると、これまで通りの動作をします。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script type="text/javascript">
 var MySize = function(x, y) {
 this.x = x;
 this.y = y;
 }
 MySize.prototype.toString = function() {
 return String(this.x) + "," + String(this.y);
 };
 var s = new MySize(50, 50);
 var params = {
 "size": s
 };
 // size[x]=50&size[y]=50&size[toString]=undefined,undefined
 console.log(decodeURIComponent($.param(params)));
 // size=50,50
 console.log(decodeURIComponent($.param(params, true)));
</script>

undefinedになる程度ならまだ良いのですが(良くないけど)、以下のような関数を定義していると、実行時エラーになってしまいます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script type="text/javascript">
 var MySize = function(x, y) {
 this.x = x;
 this.y = y;
 }
 MySize.prototype.toString = function() {
 return String(this.x) + "," + String(this.y);
 };
 MySize.prototype.isWide = function() {
 return this.x > this.y;
 };
 MySize.prototype.isNarrow = function() {
 return this.x < this.y;
 };
 MySize.prototype.isSquare = function() {
 return !this.isWide() && !this.isNarrow();
 };
 var s = new MySize(50, 50);
 // false
 console.log(s.isWide());
 // false
 console.log(s.isNarrow());
 // true
 console.log(s.isSquare());
 var params = {
 "size": s
 };
 // s.isSquare.call(window); => this.isWide is not a function
 console.log(decodeURIComponent($.param(params)));
 // size=50,50
 console.log(decodeURIComponent($.param(params, true)));
</script> 

jQuery 1.4にアップデートした時に、今まで動いていたjQuery.ajax()を利用している箇所が突然動かなくなった場合は、オプション引数のtraditionalにtrueを渡したり、またはjQuery全体のajaxSettingsを変更してしまうのが良いようです。

// ajax()のtraditionalにtrueを指定
$.ajax({
 "url": "http://www.example.com/", 
 "data": params, 
 "success": onSuccess, 
 "traditional": true
});
// jQuery全体の動作設定を変更
$.ajaxSettings.traditional = true;