現行のバージョン2.69のお話。

最近初フルAjaxなサイトを作っていたのだが、相当ハマった。
Ajaxだ、ワーイ!ってな感じでゴテゴテ作っていたわけで、基本がなってなかった部分は大いにあるんだけれども。。

で、どこでハマったかというと、掲題の通りファイルアップロードの部分。

jquery.form.jsではファイルアップロード時にiframeを動的に生成して、そっからPOSTしているっぽい。
このiframeを使ったことがなくて、仕様に疎すぎた。
気をつける点は下記の2つ。

■jquery.form.jsを使うときは、レスポンスはちゃんとした形で返す
Ajax初心者ってのもあって、今回は非同期通信で生HTMLをサーバから取ってきて、それをダイアログだの何だのに埋め込んでいた。
別にこれ自体は問題ないっちゃないハズなのだが、残念ながら問題が起きた。。

というのも「どうせページ全体は更新しないし、どっかに埋め込むからいいやー」と思ってレスポンスをBODYの中身だけにしていたのだ。
これがファイルアップロードの処理にクリティカルヒット。

アップロード処理後に

<FORM ...略...>
...略...
</FORM>

こんなレスポンスを返していたのだが、jquery.form.jsが返してくれたresponseTextを見てみると、最初の<FORM>タグが足りない。
なんで?どこいったんだ?とjquery.form.js内に侵入して

alert(doc.documentElement.innerHTML);

としてみたところ、こんなのが出た。

<HEAD>
<FORM ...略...></HEAD>
<BODY>
...略...
</FORM>
</BODY>

なんで<HEAD>の中に<FORM>が埋まってんの??
で、後のレスポンスは<BODY>に埋め込まれてて、responseTextには<BODY>の中身だけが返されてた。

なんじゃそりゃと。
そしてこの現象が発生するのはIEだけ。FireFoxとかChromeでは発生しない。

結局IEのバグくさい気もするが、<HEAD>だの<BODY>だのレスポンスにちゃんとしたタグを入れるとOKになったので気をつけましょー

■レスポンス内のJavaScriptに注意
↑でHTMLもろもろのタグを入れたんだれども、まだ動かない。
レスポンスに埋め込んでたJavaScriptが動かん。。

これはもっと単純だった。
Ajaxだ、効率化ワーイ!!!!!!ってことでjQueryとかもろもろを初回アクセス時に全部読み込んで
その後は放置だったわけだが、iframeなので読み直さないといかんのですな。

ということで、ファイルアップロード後のレスポンスで必要なJavaScriptファイルは再読み込みしてあげましょー。

いやあ、時間使った。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Name *
Email *
Website

*