Ajax reemplaza texto por imagen
-
04-07-2019 - |
Pregunta
He reunido el siguiente script de mootools
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
});
aquí está el html
<div id="AJAX">
<h3>Ajax Response</h3>
<div id="log_res">exercise</div>
</div>
está usando moo 1.1.
Lo anterior funciona bien, la página se carga, entonces la solicitud de ajax se inicia en div id log_res tiene una clase de ajax-loading mientras se actualiza, y cuando finaliza, el ejercicio de texto en el div se reemplaza con lo que sea que haya devuelto ajax ( yippee). Pero quiero poner un poco de HTML personalizado en el div WHILST que está cargando la página, ya que la clase ajax-loading no es suficiente para contener la información, también quiero poner un indicador intermitente en el div mientras que la solicitud de ajax está recuperando la información . Espero que tenga sentido!
Solución
Con MooTools 1.2, esto funciona según lo solicitado:
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();
}
Ya que no eres divertido y usas MooTools 1.1, debo cavar un poco ... En realidad, lo tengo funcionando con casi la misma configuración que tienes (aviso que uso target
en lugar de < código> log , que se definió fuera del alcance de esta función):
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();
}
Otros consejos
¿No puedes hacer algo como esto?
function updateData (url, target)
{
var target = $(target);
target.innerHTML = 'Please wait...';
//and the rest of the function
}