CODEWITHSUNDEEP
phpjqueryajax
DomingoSL
DomingoSL

Reputation: 15494

Calling AJAX from jQuery and displaying a waiting message

I'm very new at AJAX calls from jQuery and I'm a bit stuck trying do to this; I have an AJAX call from jQuery like this:

$(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}});
});
});

This script is inside a web page triggered when the user hits a particular row (<tr></tr>) from a table. stats-render.php outputs HTML text with some info and graphics. This answer some times takes a while (15 seconds), so I would like to show the user a waiting message when he/she triggers the script and when the call returns an answer show the output text in a div (lets call it <div id="render-div">).

So the questions are, how can I show a waiting message? If you know a good script for showing this in a modal, I would appreciate it.

How can I output the result from stats-render.php into a div?. Thank you so munch for any help!

enter image description here

Upvotes: 1

Views: 1925

Answers (3)

Ben
Ben

Reputation: 745

I just do a simple show the message before the call, and hide it on the success callback like this:

However I think jquery might have a callback option when the ajax call starts, and when it stops. 

 $(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

}
});
});
});

Upvotes: 0

qwertymk
qwertymk

Reputation: 35284

Just display a loading message in the div where the results go in the interim.

$(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...');
    });
});

Or for even more fun:

$(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);
    });
});

Upvotes: 2

nrabinowitz
nrabinowitz

Reputation: 55678

The easiest option is probably to check out the jquery-loading plugin.

Upvotes: 1

Related Questions