JSONViewは、Firefoxで application/json なコンテンツを綺麗に表示するプラグインです。
とても便利ですね。
ところが、jQuery.formプラグインなどと組み合わせると、不具合を起こすことがあるので注意が必要です。
一般的なajaxでは、
$.ajax({
url: 'hogehgoe',
success: function(data, dataType) {
}
});
といったやりかたをしますが、このときは特に問題ありません。
しかし、jQuery.formで $('form').ajaxSubmit() を使う場合、内部的には$.ajaxは使用されていません。
XMLHttpRequestでは画像データ等のmultipart/form-dataを送信できないため、ダミーのiframeを作って、そこをターゲットにformの送信を実行しています。
//jquery.form.jsの内部コードのイメージ
var iframe = '<iframe id="hoge" onload="irame-onload"></iframe>';
$('form').attr('target', 'hoge');
$('form').submit();
これで、ajaxSubmitをすると、結果がiframeに入ります。
iframeのonloadイベントで、内部のinnerHTMLを見て、結果を呼び出し元に返す処理を行っています。
ここで、iframeの中身がどんな値になるかは、ブラウザの実装依存です。
一般に、プレインテキストやJSON形式が渡ってきたとしても、DOMツリーを構築するためにbodyタグまでは作ってしまうようです。
良くあるパターン
<html>
<head></head>
<body>{"result":"これが結果です"}</body>
</html>
jquery.formプラグインは、ブラウザがbodyタグの中に直接値を入れるか、またはpreやtextareaに値を入れることを期待しています。
しかし、JSONViewを使うと、以下のような綺麗なHTMLを勝手に作ってくれてしまいます。
<html>
<head></head>
<body>
<doctype html="">
<div id="json">
{
<ul class="obj collapsible">
<li><span class="prop">result</span>: <span class="num">0</span></li>
</ul>
}
</div>
</doctype>
</body>
人間様が見るには良いですが、これではjquery.formプラグインが認識できません。
そんなわけで、doctype html... といった値を丸ごとJSONパースしようとして、エラーになってしまいます。
解決策は、Content-Typeを変えるか、jquery.formを改造するくらいしかありません。
Content-Typeの変更が、一番みんなハッピーになれるはずです。
これに気づかず、JSONViewを入れると動かなくなるWebサイトがあるかもしれませんね。