jQueryからAJAXを呼び出して待機中のメッセージを表示

Question

私はjQueryからのAJAX呼び出しで非常に新しいです。

$(document).ready(function() { 
$('tr.table-row').click(function(){ 
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {//the_output_here}}); 
}); 
}); 

このスクリプトは、ユーザがテーブルから特定の行（<tr></tr>）をヒットしたときにトリガ、Webページ内にある：私はこのようなjQueryのからAJAX呼び出しを持っています。 stats-render.phpは、情報とグラフィックを含むHTMLテキストを出力します。この回答には何度か（15秒）時間がかかるので、スクリプトをトリガするときに待機中のメッセージを表示したいときや、コールが応答を返すときにdivの出力テキストを表示する（<div id="render-div">と呼ぶ） 。

質問があるので、どのように待機メッセージを表示できますか？あなたがモーダルでこれを表示するための良いスクリプトを知っていれば、私はそれを感謝します。

stats-render.phpの結果をdivに出力するにはどうすればよいですか？助けを求めてくれてありがとう！

Answer 1

ただ、結果は暫定的に行くのdivにロードメッセージを表示します。

$(document).ready(function() { 
    $('tr.table-row').click(function(){ 
    $.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { $('div.for-results').html(/* d... */); }); 
    $('div.for-results').html('loading...'); 
    }); 
}); 

またはそれ以上の楽しみのために：

$(document).ready(function() { 
    $('tr.table-row').click(function(){ 
    $.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { 
     clearInterval(loading); 
     $('div.for-results').html(/* d... */); 
    }); 
    $('div.for-results').html('loading'); 
    var loading = setInterval(function() { $('div.for-results')[0].innerHTML += '.' }, 1000); 
    }); 
}); 

Answer 2

最も簡単なオプションはjquery-loading pluginをチェックアウトすると考えられます。

Answer 3

私は、呼び出しの前に簡単なショーメッセージを行い、このような成功コールバックにそれを隠す：私はAJAX呼び出しが開始したときに、それが停止したときにjQueryのコールバックオプションを持っているかもしれないと思うしかし

。

$(document).ready(function() { 
$('tr.table-row').click(function(){ 

//Show the loading message, or chage a css class, or what have you. 
$('#loadingmessagetext').show(); 

$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { 

//Hide the loading message 
$('#loadingmessagetext').hide(); 

//the_output_here 

} 
}); 
}); 
});