23 Jan
matte

matte il 23 January 2007 parla di Ajax/Web 2.0, Rails Snippet

Rimuovere un elemento dal DOM dopo il Fade di script.aculo.us

Mi è capitato spesso di avere il seguente problema: una lista ordinabile di oggetti con la possibilità di eliminarne uno con una chiamata AJAX. Una volta eliminato l’oggetto dal database e fatto scomparire dalla pagina con il seguente comando:

    1 render :update do |page|
    2   page.visual_effect :fade, "item"
    3 end

Così facendo l’elemento del DOM viene solamente nascosto e non rimosso, quindi se andate a riordinare gli elementi otterrete un errore in quanto viene passato anche l’id dell’oggetto appena eliminato. Per ovviare a questo problema ho pensato di variare il codice in:

    1 render :update do |page|
    2   page.visual_effect :fade, "item"
    3   page.remove "item"
    4 end

Così però viene perso l’effetto di fade in quanto subito dopo averlo lanciato viene rimosso l’elemento dal DOM. Per risolvere il problema elegantemente, senza mettere un timeout di attesa per l’effetto fade basta utilizzare uno dei callback degli effetti di script.aculo.us:

    1 render :update do |page|
    2   page.visual_effect :fade, "item", {:afterFinish => "function(){Element.remove('item')}"}
    3 end

Così eviterete il problema ed avrete prima l’effetto di fade e poi la rimozione dell’elemento dal DOM della pagina.

Puoi inviare un commento, o fare un trackback dal tuo sito.

6 Commenti a “Rimuovere un elemento dal DOM dopo il Fade di script.aculo.us”

  1. Massimo il 31 January 2007 alle 14:41 dice:

    Il nome corretto del callback e’ :afterFinish, al posto di :after_finish usato (penso) erroneamente nell’ultimo frammento di codice.
    A parte questo, l’articolo mi e’ stato molto utile.

  2. matte il 31 January 2007 alle 15:11 dice:

    Ciao Massimo,
    mi fa piacere che l’articolo ti sia risultato utile. Grazie per la segnalazione! Ho ricontrollato il codice dove l’avevo utilizzato ed infatti non funzionava :-)

    Grazie ancora

  3. LucaPette il 18 November 2007 alle 01:35 dice:

    Era esattamente quello di cui avevo bisogno :) Grazie!!!

  4. matte il 19 November 2007 alle 11:34 dice:

    :-) prego!

  5. marco il 28 July 2008 alle 13:17 dice:

    Ciao Matte,
    mi servirebbe tantissimo questo codice, ma nn riesco a implementarlo.
    ho provato a cercare “page.visual_effect” in tutto il proggetto e non lo trovo, naturalmente uso script.aculo.us. mi puoi dire come posso fare ?

  6. matte il 29 July 2008 alle 12:21 dice:

    Ciao Marco,
    potresti dare un occhio alla guida presente sul nuovo sito di script.aculo.us all’indirizzo:

    http://github.com/madrobby/scriptaculous/wikis/core-effects

    Trovi la lista di callback, variabili, parametri e come utilizzare gli effetti. Spero ti torni utile!

    A presto

Scrivi un commento