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