visualizzare risultati in tabelle con ajax

[xmaxfane]

Salve, vi spiego subito quello che vorrei fare:
inviare i dati di un form tramite ajax, e visualizzare sempre sulla stessa pagina i risultati della query effettuata con i parametri inviati del form, creando tante tabelle quanti sono i record ottenuti.
Il mio problema più grande è come impostare il discorso, ossia devo farmi restituire dalla richiesta ajax le tabelle con i dati, oppure solo i dati e le tabelle vengono create chissàcome dopo, o cosa?
Vi ringrazio anticipatamente per i suggerimenti che potrete darmi.
Thanks

[xmaxfane]

Sono riuscito a risolvere il problema!
Ho preso spunto da un codice che ho trovato in questo post e praticamente creo le tabelle con relativa formattazione nella pagina in cui eseguo la query e poi inserisco il tutto dentro un div con:
document.getElementById('casa').innerHTML = xmlHttpReq.responseText

Purtroppo adesso detta così sembra facile e soprattutto ovvia, solo che io ancora non ho capito bene come e cosa ottenere di solito dalla risposta della chiamata in ajax, devo prenderci ancora confidenza.

Nonostante non abbia ricevuto consigli, ringrazio tutti quelli che hanno letto il mio post e che avevano intenzione di aiutarmi.
Thanks

[Marburg]

Ciao, io sto realizzando una widget che permette di realizzare tabelle paginabili e ordinabili via ajax. A dir la verità l'ho quasi finito (domani penso a come realizzare il supporto per i filtri).

Il tutto si basa sulla definizione di una tabella e, a seconda di alcuni parametri definiti come valori di attributi "class" la libreria attiva tutto il codice necessario.

Lato server ho creato un oggetto php che gestisce correttamente le varie impostazioni fornendo i risultati.

Client + server si tratta di scrivere neanche 10 righe di codice per far funzionare il widget...

La parte javascript si basa su "jQuery" (www.jquery.com) che è un framework js veramente fantastico per chi, come me, di js ne capisce proprio poco!

La parte php si basa sugli oggetti di JuniorCMS.com (di cui visualizza id e titoli dei documenti) che è un mio cms (www.juniorcms.com) a sua volta sviluppato sul framework xBlueII.
Ci si sta poco a sistemare il php in modo da funzionare anche senza il framework mio... praticamente viene utilizzato un'oggetto per definire gli indici di paginazione ma in linea di massima è facile farlo direttamente.

La demo la puoi vedere qui:
http://www.juniorcms.com/demo/jcmTableList/

La compatibilità è stata testata su firefox, ie6 e opera 8.5.

Per adesso ho messo su la pagina al volo... guarda il codice html (nn c'è una riga di js da personalizzare e nn c'è una riga di php!) più avanti posterò anche qualche commento dettagliato e lo zip da scaricare.

[xmaxfane]

Ciao, ho visto la demo, hai fatto veramente un bel lavoro!
A me interesserebbe sapere come fai a ordinare i campi e a richiamare le varie pagine, visto che dovrei fare anch'io una cosa del genere.
Potresti postarmi qualcosa?!
Ancora complimenti

[Marburg]

Allora, per la parte js puoi vedere tutto dai sorgenti. L'ho commentato nei minimi dettagli proprio perchè io nn sono molto bravo i js e se ci devo mettere le mani almeno so dove metterle.

Per la parte php:

Il widget invia al server una richiesta POST via ajax passando i seguenti parametri:

- "jcmSortTable": è l'id della tabella su cui si stanno effettuando le operazioni

- "jcmSortTable_colId": è l'id della colonna da ordinare. Se l'id della tabella è "docs" otterrai dei valori tipo "docs_0", "docs_1", ecc...

- "jcmSortTable_colOrd": è il verso dell'ordinamento "ASC" o "DESC".

- "jcmSortTable_newClass": da nn modificare e da rimandare al widget... serve per evidenziare la classe della tabella ordinata.

A questo punto puoi iniziare a scrivere la query di estrazione e ordinamento.
$sql = 'SELECT * FROM tabella ';

Per il nome del campo di ordinamento dovrai arrangiarti... nel senso che dovrai trovare un'associazione tra l'id della colonna passato dal widget e il nome della colonna nel db:

$col['docs_0'] = 'id';
$col['docs_1'] = 'titolo';

$sql.= ' ORDER BY '.$col[$_POST['jcmSortTable_colId']].' '.$_POST['jcmSortTable_colOrd'];

La query di ordinamento è completa!
Possiamo processarla e visualizzare le righe come output. (Nn so se la sintassi è corretta perchè ormai sono 2 anni che mi sono fatto degli oggetti per manipolare le query e i comandi diretti nn me li ricordo più!)

while ( $row = mysql_fetch(mysql_query($sql))) {
echo '<tr>';
echo '<td>'.$row['id'].'</td>';
echo '<td>'.$row['titolo'].'</td>';
echo '</tr>';
}

Alla fine aggiungi una riga che risulterà nascosta. Questa riga serve per tornare al widget alcune informazioni sulle operazioni eseguite (serve sopratutto per la paginazione che nn ti ho spiegato in questo post):

echo '<tr class="pagerOptionsLine"><td>';
echo '<span class="tableId">'.$_POST['jcmTableList'].'</span>';
echo '<span class="colId">'.$_POST['jcmSortTable_colId'].'</span>';
echo '<span class="colOrd">'.$_POST['jcmSortTable_colOrd'].'</span>';
echo '<span class="newClass">'.$_POST['jcmSortTable_newClass'].'</span>';
echo '</td></tr>';
die();


A questo punto dovrebbe funzionare... Io mi sono costruito un oggetto che permette di riassumere questa cosa in 4 righe di codice... e gestisce pure la paginazione.

Oggi dovrei riuscire a sviluppare il supporto per i filtri... Appena finisco il widget completo posterò l'url della pagina di descrizione con il download.

Comunque ti consiglio seriamente di guardare www.jquery.com che così poi tutto ti diventa più facile... Credimi, sono riuscito a realizzare una bella robetta (e ne sto facendo altre!) pur nn sapendo un caXX di js!

Se hai domande son qui.
Ciao!

[xmaxfane]

Il discorso dell'ordinamento vorrei affrontarlo successivamente, prima mi servirebbe sapere come hai fatto a fare la numerazione delle pagine, soprattutto come fare a richiamare le pagine con ajax, io non ne ho la più pallida idea
Io devo visualizzare max 10 risultati per pagina, ma come faccio a richiamare le pagine successive o precedenti senza dover ricaricare tutto l'ambaradan?
Praticamente dovrei fare una richiesta ajax con la query iniziale aggiungendogli dei LIMIT dinamici?!?

Thanks

[Marburg]

Beh, la paginazione dei record è proprio la questione più complessa.

Sì devi utilizzare dei LIMIT dinamici.

Se hai 20 record e vuoi ottenere 5 elementi per pagina otterrai 4 pagine:

SELECT ... LIMIT 1,5
SELECT ... LIMIT 6,5
SELECT ... LIMIT 11,5
SELECT ... LIMIT 16,5

( mi pare... bisognerebbe provare.. io ho affrontato il problema almeno 2 anni fa e mi sono creato un oggetto che mi risolve il problema :-)

Gestire la paginazione dinamica via ajax non è stato semplice. Non tanto la parte di trasmissione dati o gestione delle risposte quanto la parte prettamente JS che deve generare i link alle pagine disponibili e memorizzare da qualche parte la pagina visualizzata...

Se ti guardi il sorgente della libreria js utilizzata nell'esempio che ho postato (
http://www.juniorcms.com/demo/jcmTableList/ ) vedrai come ho fatto io... un metodo abbastanza ignobile: uso una riga nascosta (display:none) in cui ci sono tanti span. Ogni span definisce una classe diversa e contiene un valore.

Utilizzando le funzioni di jQuery è facilissimo ottenere il contenuto di un elemento specifico del dom. In questo modo quando faccio la richiesta via ajax (sempre una funzionalità di jquery) posso andare a prelevare le informazioni sullo stato attuale di paginazione e ordinamento.

Non saprei spiegartelo meglio al momento... in futuro ho anche in progetto di aprire un sito in cui scrivere tutorial su php e ajax... più che altro per fare delle buone reference sulle cose che faccio... tante volte poi nn mi ricordo più come si utilizza un componente!!!!

Ciao!