Ajax Ersetzen von Text mit Bild

Question

Ich habe zusammen folgende Mootools Skript setzen

 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

 });

her die html

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

seine Verwendung moo 1.1.

Das oben funktioniert gut, die Seite lädt dann die Ajax-Request Tritte in div id log_res hat eine Klasse von Ajax-Laden während seiner Aktualisierung, und wenn sein der Text Übung im div beendet wird ersetzt mit dem, was die Ajax zurückgekehrt ist ( Hurra). Aber ich möchte einige benutzerdefinierte HTML-Code in das div setzen, während die Seite geladen wird, weil die Ajax-Belastungsklasse nicht ausreicht, um die Informationen zu enthalten, ich möchte auch ein spinny Lichthupe in den div setzen, während die Ajax-Anforderung wird das Abrufen der Informationen . Hoffe, das macht Sinn!

Answer 1

Mit Mootools 1.2, das funktioniert wie gewünscht:

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

Da du keinen Spaß und verwenden Mootools 1.1, muss ich ein wenig graben ... Eigentlich habe ich es fast das gleiche Setup mit arbeiten, wie Sie haben (man beachte ich target statt log, die außerhalb des definierten wurde Anwendungsbereich dieser Funktion):

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

Können Sie nicht etwas tun:

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

  //and the rest of the function
}