Inserire loader durante chiamata ajax

**Al_katraz984** · 04-12-2013, 12:14

Originariamente inviata da calculus

$.post(url, dati_del_form, function(result){
// qui faccio quello che voglio con il risultato.
});

Tutto diventa più semplice.

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..

tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

Codice PHP:


if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
}

**againhere** · 04-12-2013, 20:08

Originariamente inviata da Al_katraz984

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..

tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

Codice PHP:


if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
}

grazie mille

ora il problema è... come lo spengo??

**againhere** · 04-12-2013, 20:14

Originariamente inviata da Al_katraz984

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..

tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

Codice PHP:


if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
}

grazie mille

ora il problema è... come lo spengo??

**carlomarx** · 05-12-2013, 02:42

codice:

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();

**againhere** · 05-12-2013, 21:34

Originariamente inviata da carlomarx

codice:

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();

non mi è chiaro, devo eliminare il mio codice e sostituirlo con quello oppure devo aggiungerlo al mio?
ho provato in tutti e due i modi ma niente non va, o meglio funziona ma la scritta attendi alla fine non va via

via //Se lo stato è completo
if (self.xmlHttpReq.readyState == 4) {

document.getElementById( 'loader' ).removeChild( tuaGif );

/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
}

non so perchè ma non funziona neanche quast'altra soluzione potreste farmi un esempio concreto?
grazie mille =)

**againhere** · 07-12-2013, 12:31

up

**carlomarx** · 09-12-2013, 23:50

Originariamente inviata da againhere

non mi è chiaro, devo eliminare il mio codice e sostituirlo con quello oppure devo aggiungerlo al mio?
ho provato in tutti e due i modi ma niente non va, o meglio funziona ma la scritta attendi alla fine non va via

creati un file chiamato "testo.txt", inseriscilo nella stessa cartella della pagina che ti allego. Scrivici dentro "Ciao mondo".

pagina.html:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function recuperaValore () {
    /* non conosco lo scopo di questa funzione... di conseguenza... */
    return "tizio=caio&ciao=mondo";
}

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();
</script>
</head>

<body>
<p><span style="color: #0000ff; text-decoration: underline; cursor: pointer;" onclick="xmlhttpPost('testo.txt');">Clicca qui</span></p>
</body>
</html>

**Al_katraz984** · 05-12-2013, 10:34

Originariamente inviata da againhere

grazie mille

ora il problema è... come lo spengo??

quando arrivi qui:

Codice PHP:


//Se lo stato è completo 
if (self.xmlHttpReq.readyState == 4) {

document.getElementById( 'loader' ).removeChild( tuaGif );

/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
}

rimuovi la gif

Discussione: Inserire loader durante chiamata ajax

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio