Ajax remplacer le texte avec l'image

Question

J'ai mis en place le script Mootools suivant

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

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

son utilisant moo 1.1. Ce qui précède fonctionne très bien, la page se charge alors que la requête ajax donne un coup de fouet à div id log_res a une classe de ajax-loading pendant sa mise à jour, et quand elle est terminée l'exercice de texte dans la div est remplacé par ajax (Hourra). Mais je veux mettre du HTML personnalisé dans le div WHILST la page est en train de charger, car la classe ajax-loading ne suffit pas pour contenir l'information, je veux aussi mettre un flasher spin dans la div alors que la requête ajax récupère l'information . Espérons que cela a du sens!

Answer 1

Avec MooTools 1.2, cela fonctionne comme demandé:

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

Puisque vous n'êtes pas amusant et utiliser MooTools 1.1, je dois creuser un peu ... En fait, je l'ai eu de travail en utilisant à peu près la même configuration que vous avez (notez que j'utilise target au lieu de log, qui a été défini en dehors du champ d'application de cette fonction):

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

Pouvez-vous pas faire quelque chose comme ceci:

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

    //and the rest of the function 
}