ajax onclickを使用したページ要素へのHTMLの追加

ajaxリクエストの実行中にインジケータを表示するには、ページ要素に配置されたアニメーションgifのインジケータを持つ必要があるという情報があります。データ。ajax onclickを使用したページ要素へのHTMLの追加

src = "ajax-loader.html"でインジケータ・ソースを追加すると、ajaxコールでインジケータ・ソースがそのままになり、データと置き換えられません。インジケータソースを.load（ "ajax-loader.html"）で追加すると、ajaxコールの前に表示されません。 beforesendイベントでajax呼び出しで追加すると、それも表示されません。私が2つのajax呼び出しを行い、インジケータをロードすると、データをロードするコールが同じように発生します。この単純なコードにインジケーターを表示する方法が必要です。

これはページ要素のHTMLです。

<iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>

これは、インジケータのHTMLです。

<html> 
<head></head> 
<body> 
    <img src='images/ajax-loader.gif'/> 
</body> 
</html>

これは使用.LOAD

$(document).ready(function(){ 
$('#lcupco').load("ajax-loader.html");}); 

$.ajax({ 
    url: 'luxcal/index.php?cP=40', 
    cache: false, 
    async: true, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
});

を呼び出すコード

あるbeforesend

2つのAJAX呼び出し使う

$.ajax({ 
      url: 'luxcal/index.php?cP=40', 
      cache: false, 
      async: true, 
      beforeSend: function() { 
       $('#lcupco').load('ajax-loader.html'); 
       // $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either. 
      }, 
      success: function(data) { 
      $('#lcupco').html(data); 
      }, 
    });

：それを試してみてくださいインジケータ用とデータ用1

$.ajax({ 
    url: 'ajax-loader.html', 
    cache: false, 
    async: true, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
}); 


$.ajax({ 
    url: 'luxcal/index.php?cP=40', 
    cache: false, 
    async: true, 
    beforeSend: function() { 
     $('#lcupco').html('<html>Initializing calendar...</html>'); 
    }, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
});

出典

2011-12-27 user823527

うん、これはすべての種類の奇妙です。なぜ、あなたはiframeの内容を更新しようとしているのですか？（途中でsrcを持っていないようです）また、iframeルートに行きたい場合は、iframeのsrcを更新してあなたは別のページを呼び出さずにローダーimgをオーバレイすることができますか？ – JoeyP

インデックスページにプリローダーgifを追加できます。別々にロードする必要はありません。 iframeの読み込み時に、それを隠すか削除することができます。ここでデモを見ることができます：http://jsfiddle.net/diode/dAdtU/。ここで、ロードボタンをクリックすると、iframeソースが設定されます。これはページの準備ができているか、ソースを直接設定することができます。負荷がトリガーされてもプリローダーは除去されます。あなたがページ内の特定の要素（div要素、P、UL等。）の内部HTMLを修正/交換用のHTMLコンテンツを読み込むことができ、AJAXを使用して

。しかし、それを使ってページ全体を読み込むことはお勧めしません。

出典

2011-12-27 17:46:41 Diode

それは本当です、私はトップページにイメージを置くことができました。しかし、インジケータを実際に表示すると、ページが読み込まれても表示されないスライドに表示されるので、インジケータを表示したり非表示にするコードはやや乱雑です。 – user823527

を：

$.ajax({ 
       url: 'luxcal/index.php?cP=40', 
       cache: false, 
       async: true, 
       beforeSend: function() { 
        $('#lcupco').append($('<img class="indic" src="images/ajax-loader.gif"/>')); 
       }, 
       success: function(data) { 
        $('#lcupco', '.indic').remove(); 
        $('#lcupco').html(data); 
       }, 
     });

もSRC属性の代わりに二重引用符（ "）を取ることを忘れてはいけない（ '）単一

出典

2011-12-27 17:06:53 fso

イメージを要素に単に追加するだけでいいのですが、問題は解決しませんでした。 iframeはこれが好きではありませんか？私は画像の周りにタグを追加しましたが、それは助けになりません – user823527

すべての効果についての可能な説明は、単にあなたがインナーHTMLを設定するか、またはインラインフレームの内容を読み込むことができない可能性がありブラウザはそのsrc属性に基づいてiframeの内容を判断するためです。

通常、非同期呼び出しではiframeを使用しません。単純なdivは機能するはずです。 divを使用する場合は、前にhtmlを設定して（html()またはload()の関数にする）、完全ハンドラで置き換えるとうまくいきます。

出典

2011-12-27 17:09:03

ajax onclickを使用したページ要素へのHTMLの追加

答えて

関連する問題