Ajax sostituisce il testo con l'immagine
-
04-07-2019 - |
Domanda
Ho messo insieme il seguente script 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
});
ecco l'html
<div id="AJAX">
<h3>Ajax Response</h3>
<div id="log_res">exercise</div>
</div>
sta usando moo 1.1.
Quanto sopra funziona benissimo, la pagina viene caricata, quindi la richiesta di ajax prende il via in id div log_res ha una classe di caricamento di ajax durante il suo aggiornamento, e quando termina l'esercizio di testo nel div viene sostituito con qualunque cosa sia stata restituita da ajax ( yippee). Ma voglio mettere un po 'di HTML personalizzato nel div QUANDO la pagina viene caricata, perché la classe di caricamento ajax non è sufficiente per contenere le informazioni, voglio anche inserire un lampeggiatore nel div mentre la richiesta ajax sta recuperando le informazioni . Spero che abbia un senso!
Soluzione
Con MooTools 1.2, funziona come richiesto:
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();
}
Dato che non sei divertente e usi MooTools 1.1, devo scavare un po '... In realtà, l'ho fatto funzionare quasi con la stessa configurazione che hai (nota che uso target
invece di < code> log , che è stato definito al di fuori dell'ambito di questa funzione):
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();
}
Altri suggerimenti
Non puoi fare qualcosa del genere:
function updateData (url, target)
{
var target = $(target);
target.innerHTML = 'Please wait...';
//and the rest of the function
}