Chiamate ajax

[andre_bobo32]

Ciao ragazzi!
Come vedete dall'oggetto, vi chiedo aiuto per realizzare la mia pagina web la quale contiene una tabella così divisa:
- Una riga superiore (che contiene il menù);
- Due colonne sotto alla riga superiore.

La colonna di sinistra contiene un ulteriore menù il cui contenuto sarà poi visualizzato nella colonna di destra.Quello che vorrei è mantenere fisse la riga superiore e la colonna di sinistra e rendere dinamico il contenuto della colonna di destra. Tutto questo senza usare ne framen ne iframe.

Spero di essere stato abbastanza chiaro.

Grazie per l'aiuto!

Andrea

[artorius]

beh, io le tabelle non le userei, dato che sono il MALE del layout.
Comunque, ti consiglio di utilizzare una libreria di JS per effettuare le chiamate AJAX. Se vuoi implementare anche degli effetti grafici (slide, modifice CSS, cose come Accordion, Slider) ti consiglierei di usare MooTools, altrimenti, se non vuoi effetti, ti conviene usare PrototypeJS, che è più leggera, ma non ha effetti.

Poi, per rendere il codice più mantenibile io lo farei cosi:

<ul id="Menu">
	[*]Pagina 1
	[*]Pagina 2
	[*]Pagina 3
	[*]Pagina 4[/list]

Come vedi, nell href ho messo la funzione javascript:void(0) (che non fa aprire niente al link), mentre il file da aprire l'ho salvato in SRC. In questo modo se vorrai aggiungere, togliere o cambiare un link ti basterà alterare quella lista HTML senza mettere le mani nel codice JS.

Metti poi di avere il div dove verrà visualizzato il file:
<div id="Content"></div>

A questo punto ti basterebbe fare (con PrototypeJS, in Mootools è leggermete diverso)

Event.observe(window, 'load', function(){
   var elems = $$('ul#Menu li a');
   
   elems.each(function(item){
      item.observe('click', function(){
          sendAjax(this);
      });
   })
})
            
function sendAjax(elem){                            
   new Ajax.Updater('Content', elem.readAttribute('src'));               
} 

E le chiamate Ajax sono già implementate.

Due note sul funzionamento:
Event.observe(window, 'load', function);
Aggiunge all'evento onLoad della pagina (window.onLoad quindi) la funzione passata come terzo argomento (NB aggiunge, non sostituisce, quindi lo puoi fare più di una volta e tutte le funzioni verranno eseguite al caricamento della pagina).

$$(regola CSS) crea un array i cui membri sono gli elementi che corrispondono alla regola. Quindi,
"ul#Menu li a" sono "tutti i tag A figli di un LI figlio di un UL con id=Menu".

Array.each(funzione(item, index)) esegue su ogni elemento dell'array Array, la funzione passata, dandole come primo argomento l'elemento corrente e come secondo l'indice nell'array. Nella funzione, io non faccio altro che definire un evento onclick per ogni tag anchor, lanciando la funzione sendAjax, passandogli l'elemento stesso come parametro.

infine, Ajax.Updater invia una chiamata Ajax all'url indicato con il SECONDO argomento (che come vedi lo leggo dall'SRC dell'elemento passato alla funzione) e sostituisce il contenuto dell'elemento identificato dall'id passato nel PRIMO argomento, con il risultato della chiamata AJAX.