Aggiornare DIV con contenuto dinamico senza ricaricare la pagina

**lucalicc** · 03-12-2012, 19:27

dovrei aggiornare il contenuto di un div senza ricaricare l'intera pagina.
nel div ci dovrebbero essere dei contenuti dinamici, estratti da un database
che recupera le richieste con i parametri url inviati dal link che chiede l'aggiornamento del div.

Ho cercato sul forum e avevo trovato una soluzione al mio problema in vecchio posto del 2007 che non mi sembra il caso riesumare che è
questo

In pratica ci sono due div affiancati, il quello di destra una serie di voci di menu che una volta
cliccate devono mostrare il contenuto nel div a sinistra.

Nell'head della pagina ho inserito questo:

codice:



<script type="text/javascript">
function createRequestObject() {  
	var ro;  
	var browser = navigator.appName;  
	if(browser == "Microsoft Internet Explorer"){  
		ro = new ActiveXObject("Microsoft.XMLHTTP"); 
	} else {  
		ro = new XMLHttpRequest();  
	}  
	return ro;  
}  
		 
var http = createRequestObject();
var idPageAjax;
		
function sndReq(action,id) {
	idPageAjax=id;
	http.open('get', action);  
	http.onreadystatechange = handleResponse;  
	http.send(null);  
}  
		 
function handleResponse() {
	if(http.readyState == 4){  
		var response = http.responseText;  
		document.getElementById(idPageAjax).innerHTML = response;
	} else {
		document.getElementById(idPageAjax).innerHTML = 'Caricamento Dati...';
	} 
}
</script>

le voci di menu sono impostate in questo modo:

codice:

Voce di menu

il div che dovrebbe ricevere i dati è questo:

codice:

<div id="dettaglio_sx" class="dettaglio_sx" ></div>

la pagina dettaglio.asp contiene il codice che estrai i dati dal database acquisendo il parametro id passato come parametro url e formatta i dati da visualizzare.

Solo che non funziona, nel senso che non da errore ma cliccando sul meno il div non viene aggiornato.

Potete darmi delle indicazioni?
grazie
Luca

**cavicchiandrea** · 03-12-2012, 19:42

http.open('get', action, true); <-- aggiungerei true (asincrono) poi verifica con degli alert nella chiamata ajax che tutti gli step siano corretti e che la pagina asp risponda correttamente

**lucalicc** · 03-12-2012, 22:32

grazie per i tuoi suggerimenti, domani provo subito.
per la pagina asp non ci sono problemi, in fase di test non
deve fare altro che recuperare il parametro ID passato in url e stamparlo a video
tutta la pagina è questa unica riga
<%=request.querystring("id")%>

piuttosto, per il debug del codice javascript, che mi hai detto di inserire degli alert,
puoi indicarmi come e dove e cosa devo verificare?

Purtroppo con javascript metto mani solo per modifiche elementari ovvie, non conoscendo questo linguaggio, per cui non so come fare.

Grazie
Luca

**cavicchiandrea** · 04-12-2012, 00:47

debug:

codice:

function sndReq(action,id) {
	idPageAjax=id;
alert(idPageAjax+' '+action)//verifico id e action corretti
	http.open('get', action, true);  
	http.onreadystatechange = handleResponse;  
	http.send(null);  
}  
		 
function handleResponse() {
	if(http.readyState == 4){  
		var response = http.responseText; 
alert(idPageAjax+' '+response)//verifico id e risposta server   
		document.getElementById(idPageAjax).innerHTML = response;
	} else {
		document.getElementById(idPageAjax).innerHTML = 'Caricamento Dati...';
	} 
}

**lucalicc** · 04-12-2012, 00:52

perfetto....tutto chiaro
domani provo e vi faccio sapere
luca

**lucalicc** · 04-12-2012, 18:01

eccomi....
ho provato a fare quanto mi hai indicato ma non succede nulla,
clicco sul link che dovrebbe richiamare l'aggiornamento del div ma
non viene mostrato nulla, neppure un alert.

La pagina richiamata, che si chiama test_contenuto.html
non contiene altro che questo testo:
testo di contenuto
senza null'altro.

questo è TUTTO il codice della pagina di prova che realizzato per
testare questo codice:

codice:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function createRequestObject() {  
	var ro;  
	var browser = navigator.appName;  
	if(browser == "Microsoft Internet Explorer"){  
		ro = new ActiveXObject("Microsoft.XMLHTTP"); 
	} else {  
		ro = new XMLHttpRequest();  
	}  
	return ro;  
}  
		 
var http = createRequestObject();
var idPageAjax;
		
function sndReq(action,id) {
	idPageAjax=id;
	http.open('get', action);  
	http.onreadystatechange = handleResponse;  
	http.send(null);  
}  
		 
function handleResponse() {
	if(http.readyState == 4){  
		var response = http.responseText;  
		document.getElementById(idPageAjax).innerHTML = response;
	} else {
		document.getElementById(idPageAjax).innerHTML = 'Caricamento Dati...';
	} 
}
</script> 
</head>
<body>
<div id="div_dinamico"></div>
<div>PROVA</div>
</body>

Cosa sbaglio?
grazie
Luca

**cavicchiandrea** · 04-12-2012, 18:55

Visto che usi la libreria di jquery usa la chiamata ajax.jquery

**lucalicc** · 04-12-2012, 19:01

ovvero? come devo fare?
non mi interessa come farlo, l'importante è il risultato....
luca

**cavicchiandrea** · 04-12-2012, 19:09

Esempio veloce

codice:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">	
function sndReq(action,id) {
	$("#"+id).load(action)  
}   
</script> 
</head>
<body>
<div id="div_dinamico"></div>
<div>PROVA</div>
</body>

per maggiori dettagli http://api.jquery.com/category/ajax/

**lucalicc** · 04-12-2012, 19:58

niente....copiato e incollato il codice che mi hai suggerito in un file
ex novo senza cambiare una virgola, quando clicco sul link
prova
non succede nulla.
Ho letto la guida del comando .load() che mi hai indicato,
credo di aver capito il funzionamento dello script, cmq abbastanza
semplice anche per me che non conosco javascript e in effetti
dovrebbe funzionare, ma non lo fa.
Il file test_contenuto.html è nella stessa cartella del file test.html
dello script e lo faccio girare in locale....
Non so cosa possa essere.....
grazie per la tua pazienza...
Luca

Discussione: Aggiornare DIV con contenuto dinamico senza ricaricare la pagina

Strumenti discussione

Ricerca discussione

Visualizza

Aggiornare DIV con contenuto dinamico senza ricaricare la pagina

Permessi di invio