jQuery :: safariとappend関連メモ :: ウェブデザイナーの日記

jQuery :: safariとappend関連メモ

2009/9/23 (Wed) at 4:28 pm

気づいたのでメモ。phpで生成したhtml文字列を、ajaxでjsに渡してdomを差し替える（jQuery的にいうempty + appendする）という所作はかなり便利です。なにかのトリガーを元にあーしてこーしてvalidityチェックもやってどーのこーの .... という複雑な文字列生成のところはphpに一括お任せし、Javascript側は出来上がったhtmlを受け取るだけ、それを指定のところにappendして完了。という流れです。

これを積極的に行うことによりJavascriptは軽量になりますし、またJavascriptにおける間違い探しのデバッグ作業を減らすことができるという利点があると思います。私は元々「サーバ側でできることはなるたけサーバ側でやるのだ！」というクライアントに優しいつくりが望ましいという方針なので、その点からいってもいいです。とはいってもものすごく簡単な正規表現チェックなどもいちいちphpを呼び出していたんではトラフィックが増えて冗長なつくりになってしまうので、まぁケースバイケースでしょうけれど。

で、いつものようにその調子でやっていたらば、safariのみで再現される不思議な現象を知りましたのでメモしときます。正確に何バイトなのかは測定してないのですが、とある長大なhtml文字列をjsonでjQueryのメソッドを用いてphp → Javascriptに渡してそれをとあるidにappendするというのをやってたらば、safariの場合のみ、渡す文字列のバイト数が一定量を超えるとうまくappendされなくなるのです。

通常このようなケースは、php側でなにかタコミスをしていて、NOTICEエラーなどが出ていることが多いです。Firebugでajaxで受け取った内容をチェックしたらば、エラーはなく正常に受信している。さらにFirefoxだと意図通りにappendされて表示できている。どうもsafariだけの症状みたい。てか、webkit特有のものかもしれません。

Safariで使えるFirebugてもんは存在しないので（そういうデバッグツールあるんでしょうか？）、こういう場合の間違い探しはむずかしい。とりあえず、phpから受け取ったjsonが正常に受信しているかを知るためにalertで表示してみましたらちゃんときてました。てことはappendする部分でコケている。この場合、受け取る文字数が少ないと正常に動くのです。文字数が一定以上になった場合だけ100%再現されるのです。文字列の中にへんなものが混じっているせいではないかとも思われたので、アルファベットとhtmlタグだけのものも送ってみましたがやはり再現されました。おっかしいなー。

自分が書いたJavascriptのコードをよーく見たらこういうかしょがありました↓

$('#abc').append($(res.html));
$('#def').replaceWith($(res.html));

resオブジェクトはphpから受け取ったデータです。res.htmlにはappendされるべきhtml文字列が入っています。

いままでコレでオッケーだったもんだから深く考えずにこういう書き方をしてしまっていたのです。てか、$('#abc').append($(res.html));でも$('#abc').append(res.html);でもどっちでも動くんで、いったいどちらが正しい書き方なのだろうと不思議だったのですが、今回、$()の囲いをとっぱらって、

$('#abc').append(res.html);
$('#def').replaceWith(res.html);

としましたら、正常に動くようになりました。はぁ。ま、オチとしては私のいいかげんな書き方が原因だったとわかったのですが、一部のブラウザだけ、それも文字数が一定量以上超えたときだけ問題が出てくるなんていうnastyな症状だったので発見に時間がかかってしまいました。

文字の量が多くなると問題が出ると私は書いてますが、もしかしたら別のなにかが原因なのかもしれません。すべての可能性を考えて厳密な再現チェックをしているわけではないのでなにか別の原因だったかもしれないですが、とにかくですね、jQueryのappendやらappendToやらreplaceWithのカッコの中に$(foo)てのを入れると（fooはhtml文字列が代入された変数）へんな具合になることがあるんだなと知った次第です。

前のエントリへ次のエントリへ

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『<』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

PROFILE

藤居ヒロヤ。ウェブデザイナー／ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

www. http://www.3ot.net/
email. admin [atmark] 3ot.net
phone. 052 323 7376

お問い合わせフォーム