Ajax remplace le texte par 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

 });

voici le html

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

son utilisation moo 1.1.

Ce qui précède fonctionne bien, la page se charge, puis la demande ajax démarre dans div id log_res a une classe d'ajax-loading lors de sa mise à jour, et lorsqu'il est terminé, l'exercice de texte dans la div est remplacé par tout ce que ajax a renvoyé ( Hourra). Mais je veux mettre un code HTML personnalisé dans le div WHILST que la page est en train de charger, car la classe ajax-loading n'est pas suffisante pour contenir les informations, je souhaite également mettre un clignotant dans le div pendant que la demande ajax récupère les informations. . J'espère 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();
}

Étant donné que vous n’êtes pas amusant et que vous utilisez MooTools 1.1, je dois creuser un peu ... En fait, je l’ai utilisé avec la même configuration que vous (remarquez que j’utilise target au lieu de < code> log , défini en dehors du cadre 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

Ne pouvez-vous pas faire quelque chose comme ça:

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

  //and the rest of the function
}