Question

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!

Answer 1

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