Newsgroup: it.comp.lang.javascript
Titolo: Eseguire script JS all'interno della risposta AJAX

Salve a tutti,
nonostante abbia lurkato un pò nel NG e cercato su google,
non riesco a capire come far eseguire del codice Javascript (ad esempio
un effetto lightBox con prototype) all'interno di parte di pagina,
caricata con InnerHTML in un DIV come risultato di una risposta AJAX.
Mi spiego..
Associo ad un link una chiamata AJAX --> premo il link --> faccio la
chiamata e con la risposta aggiorno un DIV.
Nel mio caso la chiamata AJAX mi restituisce una tabella presa da un DB,
sulla quale dovrei poi far delle modifiche, questa tabella contiene dei
link a delle immagini che vorrei visualizzare tramite un effetto
lightBOX al passaggio del mouse sopra il link (o con click).
L'effetto funziona perfettamente nella pagina, non funziona nel DIV
aggiornato.
Ho letto che bisognerebbe usare la funziona eval(), ma non ho ben capito
come attuare la soluzione. Vorrei sapere poi se ci sono delle soluzioni
alternative.
Grazie mille.
YUS

 aggiornato.
Perche` i link che aggiungi non hanno eventi collegati.
In jQuery puoi risolvere, per esempio, usando l'evento .live().
Altrimenti dopo aver aggiornato la tabella con i dati AJAX devi 
ricollegare manualmente l'evento mouseover (o il click) ai link che hai 
appena aggiunto.
Bye.


Mhhh.. si vero.. i link non hanno eventi, funzionano infatti modificando
il campo "id".
Purtroppo il framework in cui è implementata tutta l'applicazione è
Prototype.
Dato che posso agire sulla risposta Ajax, posso anche implementare un
evento, ma non saprei come fare.
L'effetto lightBox è questo: 
http://livepipe.net/control/window
Come posso richiamare il JS con un evento hover o onclick affinché
funzioni ?
BTW i file JS devono essere inclusi anche nella risposta AJAX o basta
che lo siano nel file chiamante ?
Grazie mille per la pazienza.
YUS

 > appena aggiunto.
Ho trovato una funzione equivalente a .live() per prototype:
[jQuery]
$(".foo").live("click", function(e) {
   // bar
});
[Prototype]
This is usually done with Event#findElement:
document.observe('click', function(e, el) {
  if (el = e.findElement('.foo')) {
    // there's your `el`
    // might want to stop event at this point - e.stop()
  }
});
Ma non mi è ben chiaro questo codice.. come va implementato ?
Grazie
YUS


Nessuna idea ?
YUS

 YUS
Non conosco Prototype, ma sembra che il metodo che riporti qui non
accetti classi css, ma solo tagName:
http://www.prototypejs.org/api/event/findElement
Il problema con lightbox è che scorre le immagini appena la pagina è
caricata, assegna gli eventi e bòn. Il che significa che se crei altri
immagini per lightbox successivamente al caricamento della pagina,
questi non avranno gli eventi associati.
Ora, hai due alternative:
- Quando crei il nuovo elemento, fai "riscorrere" a lightbox gli
elementi nuovi che hai creato. Non so se lightbox è flessibile a
sufficienza.
- Invece che far assegnare a lightbox gli eventi agli elementi quando
carichi la pagina, usi un'unica funzione che intercetta tutti i click
della pagina (è quello che fa l'esempio di Prototype) e chiami tu
manualmente il lightbox per quell'immagine. Non so se lightbox è
flessibile a sufficienza.
Ma il secondo punto risponde alla tua domanda. Per intenderci, il codice
in Prototype dovrebbe essere:
document.observe("click", function(event){
    if (event.button === 0) {
        var target = event.element();
        var link = target.parentNode;
        if (link && link.tagName === "A") {
            var rel = link.getAttribute("rel");
            if (rel && rel.indexOf("lightbox") === 0) {
		alert("It's a lightbox link");
		event.stop();
            }
        }
    }
});
Si presuppone che le immagini siano contenute in link con l'attributo "rel".
Hope it helps.
-- 
"When you have eliminated the impossible, whatever remains, however
improbable, must be the truth."