こんにちは。エンジニアの高田です。
最近めちゃくちゃ寒いですね…。
今朝暖房つけても部屋が暖かくならないので、エアコンのフィルタを掃除したら、めちゃくちゃ暖まるようになりました。
こまめにお掃除必要です！

IE11でのみ問題発生！！

先日、Ajax（非同期通信）を使用してサーバー側からとってきた値を画面に表示するという処理において、IE11だけ動かないという問題が発生しました。
開発中はたいていGoogle Chromeを使って動かしているので気づきませんでした。

現象としては、リスト上で選択したものの情報をAjaxを使って
サーバサイドから取得して画面に表示するというものですが、
1度選択後、別の値を選択しても最初選択したものが表示され、
値の変更ができないというものでした。

しかもIEだけ。その他のブラウザでは正常に動きました。
JavaScript部分なので、IE11の開発者ツールを起動して
デバッグしてみると、正常に動きました。

混乱。。。

開発者ツールを閉じて動かすと、やっぱり正しく動かない。

結論はAjaxのキャッシュ

結論としては、Ajaxのキャッシュが問題で動かないというものでした。
なぜ気づかなかったんだろう。IEのキャッシュ問題。
Ajaxを使うときは「cache」と「async」は常に意識しておくべきでした。
　

解決策１「$.ajaxでcacheオフを設定」

　
Ajax通信毎に設定する方法です。
参考：jQuery.ajax() | jQuery API Documentation

$.ajax({ 
    url: '/test', 
    type: 'GET', 
    cache: false, // キャッシュオフ
    async: true,  // 非同期通信
    success: function (data) { 
        cosole.log(data);
    } 
}); 

解決策２「$.ajaxSetupでcacheオフを設定」

　
こちらは予め全ての Ajax 通信についてキャッシュをさせないようにする方法です。
参考：jQuery.ajaxSetup() | jQuery API Documentation

$.ajaxSetup({cache: false});

　
　
とにかく値が変わらなくて困ったらキャッシュを疑えですね。
ではまた。