Ajax substituir texto com imagem

Question

Eu coloquei o seguinte mootools roteiro

 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 o html

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

sua usando moo 1.1.

O funciona bem acima, a página é carregada, em seguida, os chutes solicitação do Ajax em div log_res id tem uma classe de ajax-loading, enquanto a sua actualização, e quando seu terminado o exercício texto no div é substituído por qualquer que seja o Ajax voltou ( Yippee). Mas eu quero colocar um pouco de HTML personalizado na div enquanto a página está carregando, porque a classe ajax-loading não é suficiente para conter a informação, eu também quero colocar um pisca-pisca spinny no div enquanto o pedido ajax está recuperando as informações . Esperança de que faz sentido!

Answer 1

Com MooTools 1,2, isso funciona como solicitado:

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

Uma vez que não são divertidos e usar MooTools 1.1, devo cavar um pouco ... Na verdade, eu tenho que trabalhar usando quase a mesma configuração como você tem (target aviso eu uso em vez de log, que foi definido fora do escopo desta função):

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

Você não pode fazer algo como isto:

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

  //and the rest of the function
}