MSIE :jQuery の append()/html() が機能しないため、getElementById().innerHTML に頼る

StackOverflow https://stackoverflow.com/questions/1145672

質問

これは長いものですが、

前提

クライアントの現在のプロジェクトのバグ修正を手伝うために呼び出されました。修正が必要だったのは求人一覧ページです。ジョブのリストがあり、いずれかをクリックすると、JavaScript がアクティブになっている場合、AJAX 呼び出しが行われ、ジョブの詳細が既存の要素 (DIV#emploi_details) に動的にロードされます。JS がアクティブ化されていない場合は、ジョブの詳細を含むページが単純にリロードされます (それほど重要ではありません)。

私は開発 Web サイトで作業するために、彼らのラボサーバーにジャンプしました。

問題

基本的に、IE7 は (当初は) $().load() 経由でロードされたコンテンツを表示していませんでした。IE6 は innerHTML で問題なく動作しました。リクエストを送信すると、毎回返信が来ます。データを受信し、alert() して確認することはできますが、コンテンツの実際のダンプは機能しません。Safari、Firefox、問題ありません。情報をロードしている DIV#emploi_details 要素には CSS display:none; があります。スタイルシート内にあり、コンテンツが読み込まれた後に表示されます (その他のそれほど重要ではない詳細)。

show_emploi = function(id, succ_id)
{
    $('#emploi_details').fadeOut(800, function() {
        var $$ = $(this);

        $$.load('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
            if (isIE6) document.getElementById('emploi_details').innerHTML = data;
            $$.show();
        });
        $('#bgContent').fadeOut();
    });
}

ソリューション

最初は、おそらく $().load() が機能していないのではないかと思いました。そのため、ロードされたコンテンツの操作をより詳細に制御するために、これを $.get() に変更しました。

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    $$.empty().append(data).show();
});

これは機能します。IE6 および IE7 を含むすべてのブラウザーで。問題ない。奇妙なことですが、それが機能するかどうか、そして完全に証明されるかどうかは知っていますので、質問しないでください。

どんでん返し

ここからがおかしなことになります。バグが修正されたと考え、その解決策を実際の Web サイトに適用したところ...それは機能しません。IEはそれが気に入らないだけです。$.ajax や他のあらゆる種類のものを試した後困惑しましたが、最終的にライブ Web サイトにはこれを使用します。

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    document.getElementById('emploi_details').innerHTML = data;
    $$.show();
});

また、必要な作業を実行するには必要最低限​​の JS のようなものはないため、すべてのブラウザで動作します。必然的に、この修正は開発 Web サイトでも機能します。

「続きます」

コンテンツの埋め込み機能には、すべてのブラウザ (および明らかにサーバー) でクリックされないものがあります。

全体として、私の質問はなんとも言えない質問です。なぜ片方では機能するのにもう一方では同じことが機能しないのか、あるいはなぜ最初は正しく動作しなかったのか ($().load()) が理解できません。フレームワークのバージョンを確認するのは私の最初の本能だったため、jQuery のバージョン (1.2.6) が異なっているわけではないことは明らかです。

とにかく、興味深いミステリーIMO。

スタックランドにいる誰かが神から与えられた答えを持っていることを願っています。

ありがとう

役に立ちましたか？

解決

謎が解けたよ！これが私の問題の実例です。秘訣は、最初の成功後に別の AJAX を呼び出すことです。これにより、innerHTML の問題が何らかの形でオーバーライドされます。私を正しい方向に導いてくれてありがとう。

これまでのところ有効な解決策がまだ見つかっていないため、これが一部の人々に役立つことを願っています。これについては jQuery にも問い合わせてみます :P

$.ajax({
url:'modifyarticle.php',
type:'POST',
data:{
 id:this.id,
 article:'something',
 mode:'single',
 action:'delete'},
cache:false,
success:function(msg) {
 alert(msg);$.ajax({
  url:'getall.php',
  type:'GET',
  cache: false, 
  success: function(data) {
   $('#output').html(data);
  }
 });
}});

敬礼

他のヒント

あなたもそこにいる必要があったと思います。考えられる障害点は次のとおりです。

  • jQuery.clean:DOM に追加されるフラグメントを作成する関数。

    これは、doctypeが正しくないか、レスポンスのHTMLに欠陥がある場合に起こりうる。 クリーン・ファンクションが失敗し、DOMに何も挿入されないようにする方法。

  • jQuery.fn.append:レンダリングされた応答フラグメントを DOM に追加します。

    例えば、jQueryがDOMにコンテンツを追加する際、appendChildではなく innerHTMLのバグにより、IEはDOMが変更されたことに気づかず、レンダリングしない。 シグナルされた変更。innerHTML を使用すると、これはバイパスされます。

    注入されたHTMLが実際にそこにあることを確認したかどうかは、あなたの質問から明らかではありません。これは次のようなものでテスト可能です。

    $$.empty().append(data);
alert( $$.parent()[0].innerHTML );
$$.show();

  • jQuery.fn.show():結果を表示します。

    ご質問の内容からは、最終的な失敗がその内容によるものなのかどうかは明らかではありません。 それとも単に表示されていないだけなのか？もし コンテナにはパディングと背景があります。

    show 関数は、単に追加するよりも複雑です。 .style.display='block' にある。 要素である。IEは、要素が非表示になっていると判断した場合、その要素を表示しないことがある。 妙案がある。show()を手動設定に置き換えることで、表示が変わるのか？ 何か？

IE がステージ/開発ページとライブ サイトを処理する方法に違いがあることは明らかです。私の最初のステップは、それらの違いを見つけようとすることです。HTTP ヘッダー、エンコーディング、Doctype、追加のスクリプト、追加の CSS、さらには空白文字...一見些細な違いがこのバグの原因です。

いずれの場合も、このバグを再現するために必要な最低限の要素のみをまとめた縮小テスト ケースを準備する必要があります。たとえあなたが満足できる治療法が見つからなかったとしても、テストケースをあなたの診断書と一緒に送ってください。 jQueryへのバグレポート.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top