Immagine di caricamento in script

**pippuccio76** · 19-06-2013, 16:45

Ho questa funzione ajax perfettamente funzionante che invia una richiesta ad una pagina php e mirestituisce dei dati che riesco a visualizzare, vorrei inserire tra la richiesta e il ricevimento dei dati un immagine ,come posso fare

codice:

$(document).ready(function() {

  //al click sul bottone del form
  $("#bottone").click(function(){

	  //associo variabili
	  var url = $("#url").val();
	  var numpag = $("#numpag").val();

	  //chiamata ajax
      $.ajax({

      //imposto il tipo di invio dati (GET O POST)
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "mailurltrovata.php",

      //Quali dati devo inviare?
      data: "url=" + url + "&numpag=" + numpag,
      dataType: "html",

      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#textarea").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
      }
    });
  });
});

**Nobody33** · 19-06-2013, 17:34

codice:

 success: function(msg)
      {
     $('#div_img').fadeIn(500).delay(500).fadeOut(500);//fadein -aspetta - fadeout
        $("#textarea").delay(1500).fadeIn(300).html(msg); //  aspetta 1,5 secondi - fadeIn
      },

nel #div_img inserisci la tua immagine.

Dovrebbe andare

**carlomarx** · 19-06-2013, 17:49

Oppure, se vuoi toglierti di mezzo jQuery...

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<script type="text/javascript">
var btnClick = (function () {

	function AJAXSuccess () {
		document.getElementById("risultato").value = this.responseText;
		oGhost.parentNode && document.body.removeChild(oGhost);
	}

	function AJAXError (oError) {
		alert("Chiamata fallita, si prega di riprovare...");
		oGhost.parentNode && document.body.removeChild(oGhost);
	}

	var oGhost = document.createElement("div"), oContainer = document.createElement("div"), oWhait = new Image();

	oGhost.id = "ghost";

	/* inserisci qui l'url dell'immagine di attesa.... */
	oWhait.src = "https://www.google.it/images/srpr/logo4w.png";

	oContainer.appendChild(oWhait);
	oGhost.appendChild(oContainer);

	return function () {
		var oReq = new XMLHttpRequest();
		oReq.onload = AJAXSuccess;
		oReq.onerror = AJAXError;
		oReq.open("post", "mailurltrovata.php", true);
		oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		oReq.send("url=" + escape(document.getElementById("url").value) + "&numpag=" + escape(document.getElementById("numpag").value));
		oGhost.parentNode || document.body.appendChild(oGhost);
	};

})();

</script>
<style type="text/css">
	#ghost {
		position: fixed;
		left: 0;
		top: 0;
		display: table;
		background-color: #000000;
		opacity: 0.5;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}

	#ghost div {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 100%;
		height: 100%;
	}

	#ghost div img {
		display: block;
		margin: auto;
	}
</style>
</head>
 
<body>

<form name="tuoForm">

	

URL: <input type="text" name="indirizzo" id="url" />

	Numero di pagina: <input type="text" name="pagina" id="numpag" /></p>

	

<textarea id="risultato"></textarea></p>

	

<input type="button" id="bottone" value="Cliccami" onclick="btnClick();" /></p>

</form>

</body>
</html>

**Vindav** · 19-06-2013, 17:53

nel beforeSend della chiamata ajax mostri l'immagine, nel success la nascondi.

http://api.jquery.com/jQuery.ajax/

**pippuccio76** · 19-06-2013, 21:28

Originariamente inviato da Nobody33

codice:

 success: function(msg)
      {
     $('#div_img').fadeIn(500).delay(500).fadeOut(500);//fadein -aspetta - fadeout
        $("#textarea").delay(1500).fadeIn(300).html(msg); //  aspetta 1,5 secondi - fadeIn
      },

nel #div_img inserisci la tua immagine.

Dovrebbe andare

Scusa ma in jquery ed ajax sono un po a 0, la tua funzione la sostituisco al success della function(msg) ,
Avendo un form , dove inserisco :

<div id="div_img">[img]loading45.gif[/img]</div>

In cui loading45.gif è la mia gif di caricamento?

**Nobody33** · 19-06-2013, 22:45

La inserisci dove vuoi che compaia. Non ho idea com'è strutturato il tuo form. Dato che si tratta di un load.gif (prima non è stato specificato), potresti anche eliminare il primo effetto fadeIn e fadeOut del div immagine.

Inoltre, potresti provare anche di inserire prima del success questo, ma poi dovresti eliminare il loading nella funzione success e fare solamente il fadeIn del messaggio di successo:

codice:

beforeSend: function() {
			$('#button').attr('disabled', true);//id bottone
			$('#button').after('<span class="image">[img]percorso/loading.gif[/img]</span>');
		},	

	success: function(msg){ ecc...

**pippuccio76** · 19-06-2013, 23:00

Allora la js lo modificata così :

codice:

$(document).ready(function() {

  //al click sul bottone del form
  $("#bottone").click(function(){

	  //associo variabili
	  var url = $("#url").val();
	  //var cognome = $("#cognome").val();

	  //chiamata ajax
      $.ajax({

      //imposto il tipo di invio dati (GET O POST)
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "mailtrovata.php",

      //Quali dati devo inviare?
      data: "url=" + url ,//+ "&cognome=" + cognome,
      dataType: "html",
      
       // visualizzo l'immagine nel caricamento 
       beforeSend: function() {
			$('#bottone').attr('disabled', true);//id bottone
			$('#bottone').after('<span class="image"> [img]loading45.gif[/img]</span>');
		},  


      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#textarea").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
      }
    });
  });
});

Nel form ho il bottone che avvia la ricerca :

codice:

<input type="button" id="bottone" value="Invia i dati" onclick="return controllo_mail()";>

Ma non appare l'immagine durante il caricamento ma il bottone e come se diventasse trasparente, loading45.gif è nella stessa cartella dello script js se metto l'alt la scritta appare appena premo il pulsante e non va + via.....

**Nobody33** · 19-06-2013, 23:21

appena premo il pulsante e non va + via.....

Errore mio.

Codice completo:

beforeSend: function() {
$('#bottone').attr('disabled', true);//id bottone
$('#bottone').after('<span class="image"> [img]loading45.gif[/img]</span>');
},
complete: function() {
$('#bottone').attr('disabled', false);
$('.image').remove();
},

//Inizio visualizzazione errori
success: function(msg)
{
$("#textarea").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
},

Se ti compare l'alt dell'immagine, ma non l'immagine stessa, vuol dire che il percorso non è quello corretto.

**pippuccio76** · 20-06-2013, 10:56

Funziona grazie , faccio un altra domanda è possibile eseguire questa funzione per un tempo prefissato e alla fine del tempo ricevere comunque la response dei dati fino al momento catturati ?

**cassano** · 20-06-2013, 15:32

Io userei il plugin Jquery BlockUI

Discussione: Immagine di caricamento in script

Strumenti discussione

Ricerca discussione

Visualizza

Immagine di caricamento in script

Permessi di invio