6

これは長いもので、

前提

クライアントの現在のプロジェクトのバグ修正を支援するために呼び出されました。修正が必要だったのは、求人情報ページでした。ジョブのリストがあり、1 つをクリックすると、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 サイトでも機能します。

「つづく」

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

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

とにかく面白いミステリーIMO。

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

ありがとう

4

2 に答える 2

2

謎が解けました！ここに私の問題の実例があります。秘訣は、最初の成功後に別の 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);
  }
 });
}});

あいさつ

于 2009-08-27T20:21:04.127 に答える
1

私はあなたがそこにいなければならなかったと思います。考えられる失敗のポイントを次に示します。

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

    これは、doctype が正しくない場合、または応答 HTML に何らかの欠陥があり、クリーン関数が失敗し、DOM に何も挿入されない場合に発生する可能性があります。

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

    jQuery は innerHTML ではなく appendChild を使用してコンテンツを DOM に追加するため、IE は DOM が変更されたことを認識せず、通知された変更をレンダリングしないとします。これは、innerHTML を使用するとバイパスされます。

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

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

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

    あなたの質問からは、最終的な失敗がコンテンツが DOM に配置されていないためなのか、それとも単に表示されていないためなのか明確ではありませんか? コンテナにパディングと背景がある場合、それが見えますか?

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

ステージ/開発ページとライブ サイトの IE の扱いに違いがあることは明らかです。私の最初のステップは、それらの違いを発見することです. HTTP ヘッダー、エンコーディング、Doctype、余分なスクリプト、余分な css、さらには空白... 一見些細な違いがこのバグの原因です。

いずれにせよ、このバグを再現するために必要な最小限のテスト ケースを用意する必要があります。満足できる解決策が見つからない場合でも、テスト ケースをバグ レポートと一緒に jQueryに送信する必要があります。

于 2009-07-17T23:32:51.510 に答える