IE10/11でjqueryのajaxで正しくフォームが送れない

jqueryのajaxを使ってformのsubmitを使っていたら、
エラーが出るユーザーがいるとのことだったので、調べたところ
Internet Explorer10/11を使っているときのバグだったようです。

formはこんな感じで組んでいました。

<form accept-charset="UTF-8" action="/test" method="post">
<input class="datepicker form-control" id="test" name="test[dates_attributes][201510000][date]" placeholder="日付を選択してください" readonly="readonly" type="text" value="2015-10-23" />
<input id="dates_attributes_201510007__destroy" name="test[dates_attributes][201510000][_destroy]" type="checkbox" value="1" />
<a class="save-dates-btn">更新</a>
</form>

ajax部分もよくある形で組んでいました。

      $(document).on("click", '.save-dates-btn', function(event) {
        var form = $(this).parents('form:first');
        var formData = new FormData( form[0] );
        $.ajax({
          type: "POST",
          url: "#{update_dates_path}.json",
          data: formData,
          processData: false,
          contentType: false,
          error: function(data){
            console.log("error");
          },
          success: function (data) {
            console.log("success");
          }
        });
      });

サーバーはrailsを使っていて、以下のエラーが出ていました。

!! Unexpected error while processing request: bad content body

調べていったところ、
IE10/11ではformの中の最後のinputがチェックボックスで、それに対してチェックボックスがついてないときに、
ajaxで送るformDataの値がおかしくなるようです。

対策としてはcheckboxが最後にならないようにすればよいようで、
最後にhiddenでもよいのでダミーのパラメータを追加して対応しました。

<input name="dummy" type="hidden" value="1" />

参考URL
https://blog.yorkxin.org/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11/

jquery mobileを使っていたら次のページが表示されない

スマホ用サイトを作っててjquery mobileを使ってたら、
次のページに遷移したら真っ白で表示されなかった時の対応です。

まず普通に開発してたらこんな感じの記載をするかと思います。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

そうすると、最初のページはちゃんと表示されるけれども、
次のページに遷移すると真っ白になりました。
どうやらjquery mobileがajaxで遷移を制御しているのと、
次のページをキャッシュしてそうなあたりが原因なようです。
ということで、以下の記述を入れるとよさそうです。

<script>
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>

これをjquery mobileのjs読み込みの前に入れます。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

表示されなかった現象は解決して、ちゃんと遷移できるようになりました。


参考URL
http://blog.ym405nm.info/archives/528

jqueryで動的に出力したhtmlでのイベントを受け取る

最近今更ながらjqueryをがりがり書いていて、
それで久々にはまったのでメモ。
こういうプルダウンがあって、選択した値をもとに何か処理を行いたいとき、

<select id="test1" name="select1">
 <option value="1">no1</option>
 <option value="2">no2</option>
 <option value="3">no3</option>
</select>

最初から出力されてるプルダウンだとこの書き方で実行されるけど、

$('select[name="select1"]').change(function(){
  alert($('#test1').val());
});

動的に出力したプルダウンだと実行されなくて、
この書き方にしないと実行されなかった。

$(document).on('change','select[name="select1"]',function(){
  alert($('#test3').val());
});

動的にhtml書き出しているからそうといえばそうだけど、 意外な盲点でした。
githubにもサンプルコードあげました。
https://github.com/syakasyaka/html/blob/master/jquery-dynamic-on.html