Here is a custom Mootools script I have created:
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
});
Below is the HTML layout:
<div id="AJAX">
<h3>Ajax Response</h3>
<div id="log_res">exercise</div>
</div>
This script utilizes Mootools version 1.1.
The current functionality loads the page first and then triggers the Ajax request to populate the div with id log_res. The div has a class ajax-loading while updating and will display the content returned by the Ajax once complete. However, there is a desire to include some custom HTML in the div during loading as simply using the ajax-loading class is not sufficient. An additional spinner element is also intended to be displayed within the div while fetching information via Ajax. This adds extra visual feedback for the user during the loading process. I hope this clarifies the requirement!