Vai al contenuto

Ajax, dubbi di un principiante

bulvio

Da bulvio
in Web design e sistemisti

Messaggi raccomandati

bulvio

bulvio

Inviato
Inviato

Ciao a tutti...

visto che ho ormai sperimentato con successo il passaggio da visual basic (ehm...) a Web/PHP, e che tutti i gestionali che avevo in VB quando usavo i pc sono ormai tradotti per web, è giunto il momento di "migliorarli" usando Ajax.

Ho trovato una guida su internet (quella degli spaghetti, per intenderci), che verso la fine dà il seguente codice:

var ajax_req = null;

function ajaxOk() {
   if (ajax_req.readyState == 4 && ajax_req.status == 200) {
       return ajax_req.responseText;
   } else {
       return false;
   }
}

function ajaxGet(url,handler) {
   var a = new Array("placeholder");
   for (var j=2; j<arguments.length; j++) {
       a[a.length] = arguments[j];
   }
   var myhandler = function() {
       var content = ajaxOk();
       if (content != false) {
           a[0] = content;
           return handler.apply(this, a);
       }
   }
   ajax_req = CreateXmlHttpReq(myhandler);
   ajax_req.open("GET",url);
   ajax_req.send(null);
}

ma mi sembra che ne manche un pezzo.

Ovvero, mettiamo che io abbia una tabella di 3 colonne che viene creata da PHP richiamando uno script che fa una ricerca sul database.

Nella colonna centrale, vengono scritti gli "oggetti" (un po' come i forum, per capirci). In ogni <td> relativo all'oggetto, aggiungo all'interno un DIV vuoto, con id='riferimento$row[id]'. Così ogni riga avrà anche un DIV univoco in cui, in teoria, scrivere il risultato dell'ajax.

Ora... che funzione dovrei chiamare cliccando sul link associato al testo scritto nell' "oggetto" in modo che venga eseguito un php che utilizzi l'id della riga per cercare delle opzioni nel database scrivendole nel div corretto? (è chiaro?)

;)

Link al commento
Condividi su altri siti
bulvio

bulvio

Inviato
  • Autore
Inviato

Per capirci un po' meglio...

Questo è il codice principale del php:

	$result=mysql_query($query);

echo "<table width='100%' border='0' cellspacing='2'>\n";
while ($row=mysql_fetch_array($result)) {
	$class=($class=="a"?"b":"a");
	echo "<tr class='$class'>\n";
	echo "<td width='10%' style='text-align: right'><a href='index.php?usadisegno=$row[NDis]'>$row[NDis]</a></td>
<td width='60%'><a  ??????>$row[soggetto]</a><br/>
<div id='rif$row[NDis]'></div></td>
<td width='30%'>$row[Cliente]</td></tr>\n";
}

Questo a grandi linee il codice dello script che chiamerò "opzioni.php", che è quello che dovrebbe scrivere il codice dentro i DIV.

[...]
$query="select * from Opzioni where id=".$_GET[rif];

$result=mysql_query($query);
echo "<table width='100%'  border='0' cellspacing='2'>\n";
while ($row=mysql_fetch_array($result)) {
	$class=($class=="a"?"b":"a");
	echo "<tr class='$class'>\n";
[...]

Link al commento
Condividi su altri siti
Ospite AndyJ

Ospite AndyJ

Inviato
Inviato

Ciao bulvio,

intanto i miei complimenti per affrontare tematiche così tecniche e dirette. Non ho ancora affrontato AJAX (o almeno non come vorrei), ma se ho capito bene il tuo problema è quello di referenziare tanti oggettini in una tabella che devono poi referenziarsi ad un'unica funzione Javascript.

Il problema dovrebbe quindi essere quello di capire "quale" elemento della tabella sta invocando la funzione?

Questo è un piccolo esempio Javascript che da una sola funzione, modifica i contenuti di 3 celle di una tabella.

<html>

<head>
	<script type="text/javascript">

		function StartClock()
		{
			setTimeout( "UpdateClock()", 500 );
		}

		function UpdateClock()
		{
			var dtDate = new Date();

			document.getElementById( 'clock1' ).innerHTML = dtDate;
			document.getElementById( 'clock2' ).innerHTML = dtDate;
			document.getElementById( 'clock3' ).innerHTML = dtDate;

			setTimeout( "UpdateClock()", 1000 );
		}

	</script>
</head>

<body onload="StartClock()">

<table>
	<tr>
		<td><div id="clock1" name="clock1"></div></td>
		<td><div id="clock2" name="clock2"></div></td>
		<td><div id="clock3" name="clock3"></div></td>
	</tr>
</table>

</body>

</html>

Link al commento
Condividi su altri siti
bulvio

bulvio

Inviato
  • Autore
Inviato

Grazie Andy,

con una funzione "locale" (chiamiamola così), non ho problemi, basta infatti che io passi i parametri alla funzione e questa li lavora come deve, e uno dei parametri può anche essere l'ID del div da modificare.

Il problema nasceva dal fatto che a quanto pare, con quell'esempio ajax, non avevo la possibilità di passare al php i parametri necessari, e quindi alla fine il risultato dello script non avrebbe avuto una collocazione.

Ho comunque risolto utilizzando un tipo di script ajax diverso, che invece ha meno problemi, questo (che è poi pari pari quello implementato nel CMS "Flatnuke"):

// =========================================================================			 
// @function	AHAH function made by http://microformats.org/wiki/rest/ahah
// =========================================================================

function ahah(url, target, delay) {
 //document.getElementById(target).innerHTML = 'waiting...';	// 20060819 Marco Segato <segatom@yahoo.it> - Do not wait
if (document.getElementById(target).innerHTML=="") { 


 if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (req != undefined) {
   req.onreadystatechange = function() {ahahDone(url, target, delay);};
   req.open("GET", url, true);
   req.send("");
 }

} else {

	document.getElementById(target).innerHTML="";
}

}


function ahahDone(url, target, delay) {
 if (req.readyState == 4) { // only if req is "loaded"
   if (req.status == 200) { // only if "OK"
var pc=0;
	//document.getElementById(target).style.height="0px";
     document.getElementById(target).innerHTML = req.responseText;
	//showslowly(target, inc);

   } else {
     document.getElementById(target).innerHTML="ahah error:\n"+req.statusText;
   }
   if (delay != undefined) {
      setTimeout("ahah(url,target,delay)", delay); // resubmit after delay
    //server should ALSO delay before responding
   }
 }
}

chiamando la funzione ahah(indirizzo_del_php, id_del_div_di_destinazione), tutto funziona a meraviglia.

:mad:

Link al commento
Condividi su altri siti
redvex

redvex

Inviato
Inviato

La libreria che hai linkato è incompleta :mad:

mancano per esempio tutte le funzioni di servizio che dovresti scriverti tu :mad:

Per esempio ecco i miei Ajax_Replace ed Ajax_Alert

function Ajax_Replace(content,elemntID){
var e = document.getElementById(elemntID);
if (content!="EMPTY")
  		e.innerHTML = content;
  	else
  		e.innerHTML = "";
}

function Ajax_Alert(content){
if (content!="OK"){
	alert(content);
}
}

Da richiamare con

ajaxGet(tuourl, Ajax_Replace, elementID)

ajaxGet(tuourl, Ajax_Alert)

Volendo puoi anche fare qualcosa di + potente usando le funzioni anonime

ajaxGet(tuourl, function(content, elementID){
var e = document.getElementById(elemntID);
if (content!="EMPTY")
  		e.innerHTML = content;
  	else
  		e.innerHTML = "";
},elementID)

Link al commento
Condividi su altri siti
bulvio

bulvio

Inviato
  • Autore
Inviato

sì, va be'...

considera che è il primo script ajax che implemento in una pagina... quindi direi che sono ben contento che mi abbia funzionato...

poi, mi pare che il tuo ajaxRepalce ci sia nel mio, solo che è semplicemente inserito nella funzione ahah():

	if (document.getElementById(target).innerHTML=="") { 

[.....]

} else {

	document.getElementById(target).innerHTML="";
}

:mad:

Link al commento
Condividi su altri siti
redvex

redvex

Inviato
Inviato

infatti fanno la stessa cosa, nel mio intervento mi riferivo al primo tuo post quando parlavi della libreria di spaghetti ajax :D [Tra l'altro secondo me la migliore per chi vuole imparare]

Link al commento
Condividi su altri siti
bulvio

bulvio

Inviato
  • Autore
Inviato

Una cosa ancora non mi è affatto chiara.

Se io tramite ajax inserisco in un div l'output di un php, quest'ultimo come deve essere progettato?

Mi spiego meglio:

se uso un iframe, o i frame stessi, le pagine inserite sono documenti html a tutti gli effetti, con meta, head, body, eccetera, e i percorsi di riferimento al loro interno, se relativi, sono relativi al percorso della pagina "inserita" (la "figlia") e non del container.

Con ajax, come ci si comporta?

Il contenuto dei div immagino dovrà cntenere soltanto gli elementi necessari, e non gli elementi di pagina (head, body, style...). Di fatto, provato con lo style, se uso delle classi definite nella pagina "madre", funzionano.

Ma i link e i riferimenti? quale path relativo devono avere?

E gli include del php? se sono già stati inclusi nella pagina principale, devo ri-includerli nel php chiamato da ajax oppure no? (vedi ad esempio un include per definire l'apertura di un database)... dai miei esperimenti pare non funzioni, e bisogna ri-includerli anche negli script "secondari".

Mi date delucidazioni?

Link al commento
Condividi su altri siti
redvex

redvex

Inviato
Inviato

Devi mettere solo il codice da inserire nel div.

Da quel punto il poi devi considerare come se quel blocco di istruzioni fosse parte integrante della tua pagina quindi i link fanno riferimento a quelli.

Per gli include ti consiglio di usare il require_once, in modo da evitare problemi sia per eccesso che per difetto :D

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...