Ajax & risultato nel div x

**unreg** · 15-10-2008, 11:59

Salve,

ho questa pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<script type="text/javascript">

	var xmlHttp
	
	function mostra(str)
	{
		document.getElementById("progress").style.display = "block";
		
		var url = "pagina.php?sid=" + Math.random() + "&q=" + str
		
		xmlHttp = GetXmlHttpObject(stateChanged)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
	}
	
	function stateChanged()
	{
		if (xmlHttp.readyState == 4)
		{
			if (xmlHttp.status == 200 || xmlHttp.status == 0)
			{
				document.getElementById("risultato").innerHTML=xmlHttp.responseText
				document.getElementById("risultato").style.display = "block";
				document.getElementById("progress").style.display = "none";
			} else {
				alert("errore");
			}
		}
	}
	
	function GetXmlHttpObject(handler)
	{
		var objXmlHttp = null
		
		if (window.XMLHttpRequest)
		{
			objXmlHttp = new XMLHttpRequest();
		}
		else
		{
			objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		try
		{
			objXmlHttp.onreadystatechange = handler
			return objXmlHttp
		}
			catch (e)
		{
			alert("errore")
			return
		}
	}
</script>
</head>

<body>
	<div id="ajax1">
		

Clicca Qui</p>
		<p id="progress1">[img]load.gif[/img]</p>
		<div id="risultato1"></div>
	</div>
	<div id="ajax2">
		

Clicca Qui</p>
		<p id="progress2">[img]load.gif[/img]</p>
		<div id="risultato2"></div>
	</div>
	<div id="ajax3">
		

Clicca Qui</p>
		<p id="progress3">[img]load.gif[/img]</p>
		<div id="risultato3"></div>
	</div>
	<div id="ajax4">
		

Clicca Qui</p>
		<p id="progress4">[img]load.gif[/img]</p>
		<div id="risultato4"></div>
	</div>
	<div id="ajax5">
		

Clicca Qui</p>
		<p id="progress5">[img]load.gif[/img]</p>
		<div id="risultato5"></div>
	</div>
</body>
</html>

Vorrei che il risultato sia visualizzato nel div relativo al link.

Es:

Se clicco il primo link, il risultato deve essere nel div "risultato1".

Mentre

Se clicco il terzo link, il risultato deve essere nel div "risultato3".

Ecc...

Inoltre mentre esegue la richiesta si deve visualizzare la relativa progress bar che poi si nasconde.

Come devo fare ?

Per favore aiuto !

Grazie !!!

**dav22** · 15-10-2008, 12:13

nella richiesta ad ajax potresti passare un parametro con l'id del div di destinazione.. in questo modo pagina.php restituirà fra le alter informazioni proprio id tramite l'header response..

a quel punto getElementById... create element o innerhtml a seconda dei casi e il gioco è fatto, puoi anche modificare le dimensioni.. o lo style dell'elemento una votla che ti ritorna il risultato, tutto sta a cosa ti da come informazioni il pagina.php

ciao

**unreg** · 15-10-2008, 12:35

Originariamente inviato da dav22
nella richiesta ad ajax potresti passare un parametro con l'id del div di destinazione.. in questo modo pagina.php restituirà fra le alter informazioni proprio id tramite l'header response..

a quel punto getElementById... create element o innerhtml a seconda dei casi e il gioco è fatto, puoi anche modificare le dimensioni.. o lo style dell'elemento una votla che ti ritorna il risultato, tutto sta a cosa ti da come informazioni il pagina.php

ciao

la pagina "pagina.php" mi ritorna una conferma del tipo: "Record Trovato !" o "Record non Trovato"

per quanto riguarda il passaggio dell'id nella pagina faccio così:

es.

codice:

onclick="mostra(1,'esempio1')">

onclick="mostra(2,'esempio2')">

ecc...

lo recupero dal js così:

codice:

	function mostra(idx,str)
	{
		document.getElementById("progress"+idx).style.display = "block";
		
		var url = "pagina.php?sid=" + Math.random() + "&q=" + str
		
		xmlHttp = GetXmlHttpObject(stateChanged)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
	}

Ma come passo l'id alla funzione stateChanged() ???

Grazie !

**unreg** · 15-10-2008, 12:44

Inoltre al carricamento della pagina come faccio a nascondere le progress bar ?

Uso il js o applico una classe

es.

codice:

<p id="progress1" class="progress">[img]load.gif[/img]</p>
<p id="progress2" class="progress">[img]load.gif[/img]</p>
ecc..

e la nascondo tramite css

codice:

.progress {
	display: none;
}

Fammi sapere...

Grazie 10000000 ! ! !

**artorius** · 15-10-2008, 12:48

devi fare in modo che pagina.php invii anche l'id che cerca nella risposta, poi, quando leggi il responseText dall' XMLHttpRequest analizzi la stringa ed estrapoli, oppure lo aggiungi come proprietà del XMLhttprequest.

Per nascondere la barra, devi ridefinire lo style.display = 'none' al div corrispondente.

**dav22** · 15-10-2008, 12:54

allora così come passi la query puoi passare un parametro id quindi (scrivo il codice di getto guzrdala coem traccia per capire cosa intendo niente più... :P)

codice:

 

function mostra(idx,str)
	{
		document.getElementById("progress"+idx).style.display = "block";
		
		var url = "pagina.php?sid=" + Math.random() + "&q=" + str + "&dest=" + idx;
		
		xmlHttp = GetXmlHttpObject(stateChanged)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
	}

in questo modo al file php arrivano 3 parametri.. sid, q e il nuovo dest.
nel file php aggiungi semplicemente un header..

Codice PHP:




header('dest: '.$_GET['dest']);

in questo modo il php non fa nientr'altro che ripassarlo al js quindi..

codice:

function stateChanged()
	{
		if (xmlHttp.readyState == 4)
		{
			if (xmlHttp.status == 200 || xmlHttp.status == 0)
			{
				var dest = document.getElementById(xmlHttp.getResponseHeader('dest')); /* TODO verifica se è nullo ecc..ecc.. */ 
                                dest.innerHTML=xmlHttp.responseText;
				dest.style.display = "block";
				document.getElementById("progress").style.display = "none";
			} else {
				alert("errore");
			}
		}
	}

Se cerchi qualcosa su getResponseHeader vedi degli esempi fatti bene e chiari..
Ciao

PS: in questo modo generalizzi la chiamata.. sbaglio o mancano un sacco di punti e virgola nel codice? bhoo

**Virus_101** · 15-10-2008, 13:40

o.OOOO

E' inutile passare al server un dato che mi serve sono lato client.
E' follia.

Passalo come parametro tra le funzioni e te lo fai rimbalzare fino alla funzione che gestisce la response.
O come sol piu' rapida salvatelo come var globale

Codice PHP:


var xmlHttp

var elem

    

    function mostra(str , id)

    {

        document.getElementById("progress").style.display = "block";

        elem = id; // <<== ora la var e' inizializzata e visibile globalmente

        var url = "pagina.php?sid=" + Math.random() + "&q=" + str

        

        xmlHttp = GetXmlHttpObject(stateChanged)

        xmlHttp.open("GET", url , true)

        xmlHttp.send(null)

    }

    

    function stateChanged()

    {

        if (xmlHttp.readyState == 4)

        {

            if (xmlHttp.status == 200 || xmlHttp.status == 0)

            {



                     elemento = elem;

                     /*e ora ahi accesso alla var elem che contiene quello che ti serve, ci puoi mettere dentro quello che vuoi.*/                               



                document.getElementById("risultato").innerHTML=xmlHttp.responseText

                document.getElementById("risultato").style.display = "block";

                document.getElementById("progress").style.display = "none";

            } else {

                alert("errore");

            }

        }

    }

    

    function GetXmlHttpObject(handler)

    {

        var objXmlHttp = null

        

        if (window.XMLHttpRequest)

        {

            objXmlHttp = new XMLHttpRequest();

        }

        else

        {

            objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        

        try

        {

            objXmlHttp.onreadystatechange = handler

            return objXmlHttp

        }

            catch (e)

        {

            alert("errore")

            return

        }

    }

Cmq le funzioni che hai usato non sono proprio il max per gestire ajax.

**dav22** · 15-10-2008, 14:06

dici che è follia?

e se hai n chimate ajax (visto che le fa asincrone come lo salvi? a meno di farti una classe ajax..) e volevo far meno modifiche sul suo codice.. si tratta di passare 4 caratteri in più su una query string non mi sembra così eccessivo come carico server e manco lato php... bho fai te (gustibus).

e comunque il tuo non mi sembra manco corretto, folle flamer evita ste uscite :P

ciao

**artorius** · 15-10-2008, 14:17

la butto così, non so neanche se funziona: estendi xmlHttp con l'id del div da aggiornare, in modo che puoi ritrovarlo da stateChanged (tra l'altro non serve usare una variabile globale per l'XMLHttpRequest, dato che mi pare che l'oggetto sia passato come parametro alla funzione di Callback)

Codice PHP:


    function mostra(str, id)

    {

        document.getElementById("progress"+id).style.display = "block";

        

        var url = "pagina.php?sid=" + Math.random() + "&q=" + str

        

        var xmlHttp = GetXmlHttpObject(stateChanged)

        xmlHttp.idDiv = id;

        xmlHttp.open("GET", url , true)

        xmlHttp.send(null)

    }

    

    function stateChanged(xmlHttp)

    {

        if (xmlHttp.readyState == 4)

        {

            if (xmlHttp.status == 200 || xmlHttp.status == 0)

            {

                var id = xmlHttp.idDiv;

                document.getElementById("risultato"+id).innerHTML=xmlHttp.responseText

                document.getElementById("risultato"+id).style.display = "block";

                document.getElementById("progress"+id).style.display = "none";

            } else {

                alert("errore");

            }

        }

    }

    

    function GetXmlHttpObject(handler)

    {

        var objXmlHttp = null

        

        if (window.XMLHttpRequest)

        {

            objXmlHttp = new XMLHttpRequest();

        }

        else

        {

            objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        

        try

        {

            objXmlHttp.onreadystatechange = handler

            return objXmlHttp

        }

            catch (e)

        {

            alert("errore")

            return

        }

    }

Ammetto di non averlo provato (non ho tempo, sorry), ma credo che funzioni

**unreg** · 15-10-2008, 15:37

grazie a tutti

ho provato lo scritp di Artorius

cambiando la riga:

codice:

function stateChanged(xmlHttp)

con

codice:

function stateChanged()

perchè mi dava l'errore:

xmlHttp has no properties

ed ora funziona

Grazie !!!!!

Discussione: Ajax & risultato nel div x

Strumenti discussione

Ricerca discussione

Visualizza

Ajax & risultato nel div x

Permessi di invio