わたしの日記だよ

ー生きる厳しさと哀しさを鮮烈に謳うー

jQuery.ajaxSubmit()実行後、元画面が表示された時にPIE_IE678.js内でエラーが出る

jquery web IE

以前、jQuery Form Pluginで画像ファイルをアップロードするプロジェクトを作りました。

struts+jQuery Form Pluginを使ったファイルアップロード① - わたしの日記だよ

 

このプロジェクトは、CSSでボタンの角を丸くする処置が入っていて

かつ、IE8標準対応だったので、CSS3 PIEという

CSS非対応のブラウザに対して、がんばってCSSの表示を再現してくれるライブラリ（JavaScript版）を使っていました。

 

CSS3 PIEについてはこちら：CSS3 PIE: CSS3 decorations for IE

 

初回読み込み時は、問題ないのですが

jQuery.ajaxSubmit()実行後、元の画面が再読み込みされると

1242行目のel.getBoundingClientRect()のところでUnspecifiedエラーが出てしまいます。

 

◯解決方法

jQuery.ajaxSubmit()が実行される前に、PIE.attachを

jQuery.ajaxSubmit()実行後に、PIE.detachを呼んであげるだけでOKでした。

例えばこんな感じ。

$('form').ajaxSubmit({
  'target': "body",
  'beforeSubmit': function(formData, jqForm, options) {
    // 送信前に、PIEの適用をはずす
    $('.btn').each(function(){
      PIE.detach(this);
    });
  },
  'success': function(filename) {
    // 戻ってきたら、PIEの適用する
    $('.btn').each(function(){
      PIE.attach(this);
    });
  }
});

最初、target（サーバからのレスポンス出力先）を指定しているため、

普通にページ読み込みしたときと違って、PIEの処理のタイミングがずれてしまっているのかなと思い

PIEライブラリの読み込みを<header>ではなく<body>でしてみたり、

ライブラリ内でログを出しまくってページ読み込み時との差分を探したり、

見当外れなことばかりしていました。

 

使い方調べろ！！って話だった。。。