Posts by tag: ajax

by in / JavaScript
No peoples think this is good

Eseguire codice JavaScript contenuto in una response Ajax

Ajax consente l’aggiornamento dinamico di una pagina web, ma se nel contenuto della response è presente del codice JavaScript questo non viene eseguito.
Come possiamo risolvere questo problema?

Cercando in rete ho trovato che la soluzione più semplice è quella di estrarre con una regular expression il codice all’interno del tag <script> e di passarlo alla funzione eval(). Vediamo in dettaglio un esempio utilizzando per la chiamata Ajax la libreria prototype:

/ Read Article /
by in / JavaScript
No peoples think this is good

Ajax TreeView con Yahoo! User Interface Library via JSON

E’ incredibile la facilità con cui è possibile soddisfare funzionalità applicative anche complesse utilizzando opportunamente le API della libreria Yahoo! User Interface. Ecco ad esempio come possiamo ottenere un controllo TreeView in grado di caricare dinamicamente i nodi tramite Ajax:

Al costruttore passiamo l’id dell’elemento contenitore (tipicamente un div), la lista dei nodi “radice” in formato JSON, il percorso dei nodi da aprire per arrivare al nodo corrente e l’action a cui far puntare il link dell’etichetta di un nodo.
Nel pezzo di codice seguente vediamo come estendere l’oggetto TreeView di Yahoo! per aggiungere il caricamento dinamico dei nodi:

Il metodo buildTreeDynamically riceve i nodi radice dal costruttore e li salva in un array locale tramite la funzione parse dell’API JSON (riga 08). Poi imposta la funzione di caricamento dinamico dei nodi (vedi snippet seguente). Successivamente per ogni elemento dell’array controlla se il nodo è attivo (riga 13), se non lo è viene definito come foglia ed impostato il link a null (righe 27-30). Se il nodo è attivo controlla se è quello corrente o se fa parte del percorso per arrivare al nodo corrente, in quest’ultimo caso lo espande (riga 22).

La funzione loadNodeData viene chiamata all’espansione di un nodo del TreeView e corrisponde ad una GET (righe 52-53) verso un servizio applicativo che mette nella risposta HTTP la collezione di nodi da caricare in formato JSON. Questi nodi vengono poi interpretati nella funzione di callback in modo analogo a come visto per i nodi radice.

A completamento dell’esempio qui di seguito vediamo il codice che definisce la struttura del DynamicNode ovvero una specializzazione dell’oggetto Node di Yahoo! al quale sono state aggiunte informazioni specifiche come lo stato di inattività.

In conclusione questo esempio dimostra ancora una volta come sia semplice estendere le API di Yahoo! integrandone le funzionalità a vantaggio dell’interfaccia utente.

/ Read Article /