Ajax replace text with image.

Question

I have put together the following mootools script

 window.addEvent('domready', function() {
    var shouts = "timed.php";
    var log = $('log_res');
    function updateData (url,target)
    {
     new Ajax(url,{
     method: 'get', 
     update: $(target), 
     onComplete: function() {
     log.removeClass('ajax-loading');}  }).request();
     log.empty().addClass('ajax-loading');
    }

    var update = function(){ updateData ( shouts, 'log_res' ); };
    update();   // call it immediately
    update.periodical(10000);  // and then periodically

 });

heres the html

<div id="AJAX">
    <h3>Ajax Response</h3>
    <div id="log_res">exercise</div>
</div>

its using moo 1.1.

The above works fine, the page loads then the ajax request kicks in div id log_res has a class of ajax-loading whilst its updating, and when its finished the text exercise in the div is replaced with whatever the ajax has returned (yippee). But I want to put some custom HTML into the div WHILST the page is loading, because the ajax-loading class is not enough to contain the information, i also want to put a spinny flasher into the div whilst the ajax request is retrieving the information. Hope that makes sense!

Answer 1

With MooTools 1.2, this works as requested:

function updateData (url, target)
{
  var target = $(target);
  target.empty().addClass('ajax-loading');
  target.innerHTML = "Loading...";
  new Request({
    url: url, 
    method: 'get',
    onComplete: function(responseText) {
      target.removeClass('ajax-loading');
      target.innerHTML = responseText;
    }
  }).send();
}

Since you are no fun and use MooTools 1.1, I must dig a little... Actually, I got it working using nearly the same setup as you have (notice I use target instead of log, which was defined outside of the scope of this function):

function updateData (url, target)
{
  var target = $(target);
  target.empty().addClass('ajax-loading');
  target.innerHTML = "Loading...";
  new Ajax(url, {
    method: 'get',
    update: target,
    onComplete: function() {
      target.removeClass('ajax-loading');
    }
  }).request();
}

Answer 2

Can you not do something like this:

function updateData (url, target)
{
  var target = $(target);
  target.innerHTML = 'Please wait...';

  //and the rest of the function
}