[Ajax] - Info su fattibilità pagina

**Mercurio** · 14-04-2010, 09:55

Salve a tutti.
Ho l'esigenza di fare una fotogallery (in realtà è già fatta la devo solo adattare senza l'uso dei frame).
In sostanza ci sono una serie di miniature, quando si clicca sulla miniatura si apre a fianco la foto in formato pià grande con la possibilità di dare un voto, commentarla e vedere una serie di informazioni ad essa collegata.
Il mio problema è fare tutto questo senza dover ogni volta ricaricare la pagina. Da quel che ho capito con Ajax si possono fare delle richieste al server in background ma non so se basta.

Ogni foto ha associato un titolo, un commento, l'autore, il voto e altre informazioni. Quando la foto viene mostrata è possibile cambiare alcune di queste informazioni ad esemprio votandola tramete un form, e il form deve quindi avere i riferimenti di quella foto...ecco è questo che non capisco se si può fare in Ajax.

Grazie a tutti per le eventuali risposte.

**artorius** · 14-04-2010, 15:10

per farlo si può fare, si può fare tutto, quello che bisogna vedere è se chi ci mette le mani è uno pratico, perché non è mica un lavoro semplice...

Per dirtelo in breve: quando fai una chiamata ajax esegui esattamente la stessa cosa che se eseguissi la richiesta dal browser, la differenza sta nel fatto che è JS ad effettuare la chiamata e, una volta conclusa, è sempre JS ad effettuare delle operazioni, usando come input la risposta del server.

Nel tuo caso, hai bisogno di:
1. una pagina che restituisce i dati per la thumbnail selezionata
2. una pagina da chiamare come action della form che modifica i dati

Puoi devi decidere se le pagine ritornano l'intero HTML o solo i dati da sostituire ad ogni selezione delle immagini.
Nel primo caso, devi solo sostituire il contenuto dell'elemento con la risposta dal server, nel secondo caso, crei un template con identificatori dove i dati verranno cambiati ed alteri solo quelli non la struttura.

Spero di essere stato chiaro.

**Mercurio** · 14-04-2010, 15:27

Grazie mille della risposta.

Io purtroppo so programmare bene solo in php. Javascript non l'ho mai usato tanto.
Ad ogni modo in linea di massima credo di aver capito.

Io pensavo di aggiornare solo le parti della pagina che mi servono. Quando clicco sulla miniatura faccio una richiesta al server e lato server faccio le query mysql per tirare fuori i dati dal db.
A questo punto se ho capito bene devo formattare i dati in modo tale che poi riesca a inserirli nei punti giusti tramite un tamplate.
Ecco l'ultimo punto mi è un pelo + oscuro. Non è che mi puoi fare un esempio?

Intanto grazie ancora.

p.s.
Tra l'altro la pagina che sto facendo è integrata in un forum phpBB quindi sto già usando i tamplate di phpBB per formattare la pagina...mi sa che è un bel casino!

**artorius** · 14-04-2010, 15:56

mmm per l'integrazione col forum non so cosa dirti....

Per quanto riguarda, i dati ottenuti dal server, hai due opzioni:

1. Ritorni esattamente l'HTML che deve essere visualizzato, cioè lo generi lato server, poi lo inserisci nell'elemento contenitore apposito.

Un esempio:

codice:

<ul id = "Thumbs">[*]
      [img]image.thumb.php?id=1[/img]
   [*]
      [img]image.thumb.php?id=2[/img]
   [*]
      [img]image.thumb.php?id=3[/img]
   [/list]
<div id = "ImageData">

</div>

Tramite JS blocchi l'esecuzione di quei link e lanci la richiesta AJAX sullo stesso url.

La pagina imaga.data.php ritorna l'HTML che verrà contenuto nel div#ImageData.

Un Semplice esempio:

Codice PHP:


<?php

   $id = intval($_GET['id']);

   if($id == 0) exit(0);

   $db = new PDO("mysql:dbname=ImageDB;host=localhost", "user", "password");

   $query = "SELECT * FROM Images WHERE id = $id";

   $st = $db->query($query);

   $row = $st->fetch(PDO::FETCH_ASSOC);

?>

<img src = "<?php echo $row['src']?>" align = "left" />

<h3>Titolo</h3>





   <?php echo $row['title'] ?>

</p>

<h3>Autore</h3>





   <?php echo $row['author'] ?>

</p>

....



<form action = "image.update.php" method = "post" id = "UpdateForm">

   <input type = "hidden" name = "id" value = "<?php echo $row['id'] ?>" />

   ...

   

</form>

Poi quando ottieni la risposta AJAX devi solo sostituire il contenuto del div#ImageData con quello che ti ha passato il server.

**artorius** · 14-04-2010, 16:02

la seconda opzione è utilizzare una struttura di dati fissa come JSON per inviare dati al client in un formato comprensibile, per poi aggiornare solo quelli:

codice:

<ul id = "Thumbs">[*]
      [img]image.thumb.php?id=1[/img]
   [*]
      [img]image.thumb.php?id=2[/img]
   [*]
      [img]image.thumb.php?id=3[/img]
   [/list]
<div id = "ImageData">
<img id = "ImageBig" src = "" align = "left" />
<h3>Titolo</h3>
<p id = "Title">
</p>
<h3>Autore</h3>
<p id = "Author">
</p>
....

<form action = "image.update.php" method = "post" id = "UpdateForm">
   <input type = "hidden" name = "id" value = "" id = "ImageId" />
   ...
   
</form> 
</div>

Mentre il file image.data.php

Codice PHP:


<?php



<?php

   $id = intval($_GET['id']);

   if($id == 0) exit(0);

   $db = new PDO("mysql:dbname=ImageDB;host=localhost", "user", "password");

   $query = "SELECT * FROM Images WHERE id = $id";

   $st = $db->query($query);

   echo json_encode($st->fetch(PDO::FETCH_ASSOC));

?>

Il client otterrà come risposta una stringa:

codice:

{
   "id" : 1,
   "title" : "Test Image 1",
   "author" : "Pincopallino"
}

ed usando l'eval su di esso:

codice:

var obj = eval(response);

Potrà accedere ai dati come:

codice:

obj.id //ottiene 1
obj.title //ottiene "Test Image 1" etc, etc

Così può fare:

codice:

document.getElementById("ImageBig").src = obj.src;
document.getElementById("Title").src = obj.title;
document.getElementById("Author").src = obj.author;

e sostituirà direttamente i dati nell'HTML.

**Mercurio** · 14-04-2010, 16:08

Grazie mille! Mi sei stato veramente d'aiuto..a buon rendere

**Mercurio** · 16-04-2010, 17:32

Sono riusciuto a fare quasi tutto quello che mi serviva. Però ho un piccolo problema.

Un volta che clicco sulla miniatura aggiorno tutti i vari campi che mi servono, compresi i form per votare la foto. A me piacerebbe usare ajax anche per questi form, in modo che quando voto la foto la pagina non si ricarica. Solo che non capisco come fare.

La mia funzione ajax riceve un url compreso di query string che sarà poi processata dal file ajax.php.

codice:

var ajax_req = null;

function Richiesta(url)
{
    if (url.length > 0)
    {
        ajax_req = RicavaBrowser(CambioStato);
        ajax_req.open("GET", url, true);
        ajax_req.send(null);
    }
    else
    {
        document.getElementById("Title").innerHTML = "";
    } 
}

function CambioStato()
{
    if (ajax_req.readyState == 4 && ajax_req.status == 200)
    {
        alert(ajax_req.responseText);
        var obj = eval("(" + ajax_req.responseText + ")");
        document.getElementById("ImageBig").src = obj.U_RIGHT_F;
        document.getElementById("ImageBig").title = obj.RIGHT_TITOLO;
        document.getElementById("Enlarge").href = obj.U_RIGHT_F;
        document.getElementById("Enlarge").title = obj.RIGHT_TITOLO;
		document.getElementById("Title").innerHTML = obj.RIGHT_TITOLO;
		document.getElementById("info_voto").innerHTML = obj.RIGHT_F_VOTO;
		document.getElementById("info_votanti").innerHTML = obj.RIGHT_F_VOTANTI;
		document.getElementById("form_foto").Nome.value = obj.RIGHT_TITOLO;
		document.getElementById("text_comm").innerHTML = obj.RIGHT_COMMENTO;
		document.getElementById("commento").innerHTML = obj.RIGHT_COMMENTO;
		document.getElementById("info_user").innerHTML = obj.RIGHT_F_USER+" "+obj.RIGHT_F_DATA;

		if(obj.RIGHT_IS_OWNER == false){
			document.getElementById("form_foto").Nome.style.display="none";
			document.getElementById("form_foto").text_comm.style.display="none";
			document.getElementById("form_foto").invia_dati.style.display="none";
		}else{
			document.getElementById("form_foto").Nome.style.display="block";
			document.getElementById("form_foto").text_comm.style.display="block";
			document.getElementById("form_foto").invia_dati.style.display="block";
		}
		if(obj.RIGHT_IS_OWNER == false && obj.RIGHT_NO_COMMENT == true){
			document.getElementById("tab_comm").style.display="none";
		}else{
			document.getElementById("tab_comm").style.display="block";
		}
		if(obj.RIGHT_IS_U_LOGGED == false){
			document.getElementById("div_voto").style.display="none";
		}else{
			document.getElementById("div_voto").style.display="block";
		}
		if(obj.RIGHT_IS_FRECCIA_SX == false || obj.RIGHT_IS_SINGOLA == true){
			document.getElementById("sx_arrow").style.display="none";
		}else{
			document.getElementById("sx_arrow").style.display="block";
		}
		if(obj.RIGHT_IS_FRECCIA_DX == false || obj.RIGHT_IS_SINGOLA == true){
			document.getElementById("dx_arrow").style.display="none";
		}else{
			document.getElementById("dx_arrow").style.display="block";
		}
    }
}

function RicavaBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        } 
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("Non funziona con questo browser!");
    }
}

Nel file HTML la chiamo così

codice:

           <div class="forabg colonna_sx">
			<div class="inner"><span class="corners-top"><span></span></span>
				<div class="bg1">		
					<table>
						<tr>
						
						</tr><tr>
						<td><a title="{L_TITOLO_THUMB}" href="javascript:void(0)" onClick="Richiesta('{all_foto.U_FOTOG}')">
						
							[img]{all_foto.U_THUMB}[/img]
						
							[img]{all_foto.U_THUMB}[/img]
						
						</a>

						
						<p style="text-align-left; margin: 0px; padding: 0px;">
							
								<input name="{all_foto.CHECK_NAME}" type="checkbox" value="{all_foto.CHECK_VALUE}"/>[img]{U_IMG_LUCC}[/img]
							
								<input name="{all_foto.CHECK_NAME}" type="checkbox" value="{all_foto.CHECK_VALUE}"/>
							
						</p>
						
						</td>
						
						</tr>
					</table>
				</div>
		<span class="corners-bottom"><span></span></span></div>
		</div>

Vado poi ad aggiornare la pagina nei punti che mi interessa, tra i quali il form di cui parlavo sopra. A questo punto mi piacerebbe fare in modo che tale form richiami ancora la funzione ajax però con l'argomento giusto.

Non so se mi sono spiegato bene.
Intanto grazie

**Mercurio** · 20-04-2010, 13:14

Sono riuscito a fare quello che ho scritto nel post sopra...alla fine era più facile di quello che pensassi.

Però adesso ho un altro problema a cui non riesco a venire a capo.
Ad ogni foto è associata una lista di commenti che gli utenti possono inserire.
Ogni commento viene formattato in un div (in cui oltre al commento compaiono una serie di informazioni ... più o meno come i post dei forum).
Quindi ho dovuto fare in modo che il numero dei div da visualizzare cambiasse in maniera dinamica a seconda del numero di commenti presenti.
Per fare cià ho usato la funzione cloneNodes() e sono riuscito a creare tanti DIV quanti me ne servivano e compilato opportunamente tutti gli elementi interni al div.

Fin qui tutto ok. Il problema nasce quando devo richiamare la funzione ajax da uno di questi div. In ogni commento infatti è presente un pulsante di modifica e uno di cancellazione. Cliccandoci sopra viene fatta una nuoca richiesta al server tramite ajax.
Il problema è che la richiesta è come se venisse sempre dall'ultimo commento inserito. Ad esempio se voglio eliminare il primo commento in realtà come ID arriva sempre quello dell'ultimo.
Adesso allego il codice incriminato:

function CambioStato()
{
if (ajax_req.readyState == 4 && ajax_req.status == 200)
{
//alert(ajax_req.responseText);
var obj = eval("(" + ajax_req.responseText + ")");
var comm_root=document.getElementById('tab_commenti');
var comm_src=document.getElementById('blocco_comm');
var n_comm;
var tot_com = obj.TOT_COMM;
...........
...........

if(obj.IS_COMMENTI == true){
var clone = new Array();
//alert(comm_root.childNodes.length);
while( comm_root.hasChildNodes() ) {
comm_root.removeChild( comm_root.firstChild );
}

document.getElementById("no_commenti").style.displ ay="none";
document.getElementById("tab_commenti").style.disp lay="block";
for(n_comm=1;n_comm<=tot_com;n_comm++){
var a,p,img,span = new Array();
var url_canc,url_mod;
clone[n_comm]=comm_src.cloneNode(true);
clone[n_comm].setAttribute('id','blocco_comm'+n_comm);
a = clone[n_comm].getElementsByTagName("a");
p = clone[n_comm].getElementsByTagName("p");
img = clone[n_comm].getElementsByTagName("img");
span = clone[n_comm].getElementsByTagName("span");

a[0].innerHTML = eval("obj.comm"+n_comm+".COM_USER");
a[0].href = eval("obj.comm"+n_comm+".U_COM_USER").replace(/\&/g,'&');
a[1].href = eval("obj.comm"+n_comm+".U_COM_USER").replace(/\&/g,'&');
a[2].href = eval("obj.comm"+n_comm+".U_COM_USER").replace(/\&/g,'&');
a[2].innerHTML = eval("obj.comm"+n_comm+".COM_USER").replace(/\&/g,'&');
span[0].innerHTML = eval("obj.comm"+n_comm+".COM_DATA");
span[1].innerHTML = eval("obj.comm"+n_comm+".USER_REG");
span[2].innerHTML = eval("obj.comm"+n_comm+".USER_FROM");
if (eval("obj.comm"+n_comm+".IS_COM_OWNER") == true){
a[3].style.display="block";
a[4].style.display="block";
img[1].src = eval("obj.comm"+n_comm+".U_IMG_MOD");
img[2].src = eval("obj.comm"+n_comm+".U_IMG_CANC");
url_mod = encodeURI(eval("obj.comm"+n_comm+".U_COM_MOD"));
url_canc = encodeURI(eval("obj.comm"+n_comm+".U_COM_CANC"));
img[1].onclick = function() {Richiesta_2(url_mod);}
img[2].onclick = function() {Richiesta_2(url_canc);}
}else{
a[3].style.display="none";
a[4].style.display="none";
}
p[1].innerHTML = eval("obj.comm"+n_comm+".COM_TEXT");
img[0].src = eval("obj.comm"+n_comm+".U_FOTO_AVATAR");

comm_root.appendChild(clone[n_comm]);
clone[n_comm].style.display="block";
}
document.getElementById("blocco_comm").style.displ ay="none";
}else{
document.getElementById("no_commenti").style.displ ay="block";
document.getElementById("tab_commenti").style.disp lay="none";
}
}
}

**Mercurio** · 20-04-2010, 13:24

Scusate...m'è partito un invio per sbalgio.

codice:

function CambioStato()
{
if (ajax_req.readyState == 4 && ajax_req.status == 200)
{
//alert(ajax_req.responseText);
var obj = eval("(" + ajax_req.responseText + ")");
var comm_root=document.getElementById('tab_commenti');
var comm_src=document.getElementById('blocco_comm');
var n_comm;
var tot_com = obj.TOT_COMM;
...........
...........

if(obj.IS_COMMENTI == true){
var clone = new Array();
//alert(comm_root.childNodes.length);
while( comm_root.hasChildNodes() ) {
comm_root.removeChild( comm_root.firstChild );
}

document.getElementById("no_commenti").style.display="none";
document.getElementById("tab_commenti").style.display="block";
for(n_comm=1;n_comm<=tot_com;n_comm++){
var a,p,img,span = new Array();
var url_canc,url_mod;
clone[n_comm]=comm_src.cloneNode(true);
clone[n_comm].setAttribute('id','blocco_comm'+n_comm);

a = clone[n_comm].getElementsByTagName("a");
p = clone[n_comm].getElementsByTagName("p");
img = clone[n_comm].getElementsByTagName("img");
span = clone[n_comm].getElementsByTagName("span");

// compilo i campi interni al divi tra cui gli eventi onclick

a[0].innerHTML = eval("obj.comm"+n_comm+".COM_USER");

...
...

img[1].src = eval("obj.comm"+n_comm+".U_IMG_MOD");
img[2].src = eval("obj.comm"+n_comm+".U_IMG_CANC");
url_mod = encodeURI(eval("obj.comm"+n_comm+".U_COM_MOD"));
url_canc = encodeURI(eval("obj.comm"+n_comm+".U_COM_CANC"));
img[1].onclick = function() {Richiesta(url_mod);}
img[2].onclick = function() {Richiesta(url_canc);}
...
...

// poi appendo il nodo appena clonato al nodo padre

comm_root.appendChild(clone[n_comm]);
clone[n_comm].style.display="block";
}
document.getElementById("blocco_comm").style.display="none";
}else{
document.getElementById("no_commenti").style.display="block";
document.getElementById("tab_commenti").style.display="none";
}
}
}

Questa è la funzione di richiesta ajax

codice:

var ajax_req = null;

function Richiesta(url)
{
	url = url.replace(/\&amp;/g,'&');
    if (url.length > 0)
    {
    	alert(url);
        ajax_req = RicavaBrowser(CambioStato);
        ajax_req.open("GET", url, true);
        ajax_req.send(null);
    }
    else
    {
        document.getElementById("Title").innerHTML = "";
    } 
}

il problema secondo me è sul modo in cui agiscono gli onclick. Sono sicuro di inserire il valore corretto perchè ho verificato con alert che url_mod e url_canc sono corretti.
Ma quando ci si clicca sopra è come se passasse sempre url_mod e url_canc dell'ultimo nodo inserito.

Mi sapete aiutare?

**artorius** · 20-04-2010, 14:32

mi sa che non hai molto presente il concetto di eventi e di scope.

codice:

url_mod = encodeURI(eval("obj.comm"+n_comm+".U_COM_MOD"));
url_canc = encodeURI(eval("obj.comm"+n_comm+".U_COM_CANC"));
img[1].onclick = function() {Richiesta(url_mod);}
img[2].onclick = function() {Richiesta(url_canc);}

quando tu definisci una function(){...} quello che li sta in mezzo NON viene eseguito subito, ma al momento in cui la funzione viene chiamata (al click nel tuo caso), ecco, in quel momento viene lanciata Richiesta, con parametro il valore di url_mod IN QUEL MOMENTO, quindi con l'ultimo che hai associato, non prima.
Io farei una cosa, non molto bella, ma che funziona:

codice:

img[1].onclick = eval ("function() {Richiesta('"+url_mod+"');}");
img[2].onclick = eval ("function() {Richiesta('"+url_canc+"');}");

Così, per JS in img[1].onclick c'è:

codice:

function() {Richiesta('tuo/file.php?arg=1&arg=2');}

e lo stesso per img[2].onclick, ed è fisso non cambia in base al valore delle variabili.

Discussione: [Ajax] - Info su fattibilità pagina

Strumenti discussione

Ricerca discussione

Visualizza

[Ajax] - Info su fattibilità pagina

Permessi di invio