# Ajax fade effect **URL:** \ **Category:** Rails\ **Created:** [June 24, 2006, 7:53pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360 "2006-06-24T19:53:08Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 24, 2006, 7:53pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/1 "2006-06-24T19:53:08Z")
I have a list of categories, when I delete one of them, I want that item to fade and then get removed. So I do the following: 1. home\_controller: 2. delete.rjs: 3. index.rhtml: [\<%=link\_to\_remote “Delete”, :update =\> category.name, :url =\> {:action =\> “delete”, :name =\> category.name}%\>] \<% end -%\> When I now try to delete, lets say an item a20 from a list like this: - a20 [Delete] - a18 [Delete] The li for a20 on my page will be replaced by this error text: try { setTimeout(function() { ; [“a20”].each(Element.remove); }, 10000); } catch (e) { alert(‘RJS error:\n\n’ + e.toString()); alert(‘setTimeout(function() {\n;\n[“a20”].each(Element.remove);\n}, 10000);’); throw e } The above text then fades and after 5 seconds gets removed. Does anyone have an idea as to why I am getting that error when I am trying to fade the li? Thanks. ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 24, 2006, 9:48pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/2 "2006-06-24T21:48:57Z")
I made small changes to my delete.rjs: if @element\_id page.visual\_effect :fade, @element\_id, :duration =\> 4 page.delay(10.seconds) do page.remove @element\_id end end I get this in the browser now: try { new Effect.Fade(“a20”,{duration:4}); setTimeout(function() { ; [“a20”].each(Element.remove); }, 10000); } catch (e) { alert(‘RJS error:\n\n’ + e.toString()); alert(‘new Effect.Fade(“a20”,{duration:4});\nsetTimeout(function() {\n;\n[“a20”].each(Element.remove);\n}, 10000);’); throw e } Using Firefox 1.0 on ubuntu, Thoughts? Mufaddal K. wrote: > I have a list of categories, when I delete one of them, I want that item > to fade and then get removed. So I do the following: > > 1. home\_controller: > > def delete > @category = Category.find\_by\_name(params[:name]) > @element\_id = @category.name > Category.delete\_all([“name = ?”, @category.name]) > end > > 1. delete.rjs: > > 2. index.rhtml: > > [\<%=link\_to\_remote “Delete”, :update =\> category.name, :url =\> > {:action =\> “delete”, :name =\> category.name}%\>] > \<% end -%\> > > When I now try to delete, lets say an item a20 from a list like this: > > - a20 [Delete] > - a18 [Delete] > > The li for a20 on my page will be replaced by this error text: > try { setTimeout(function() { ; [“a20”].each(Element.remove); }, 10000); > } catch (e) { alert(‘RJS error:\n\n’ + e.toString()); > alert(‘setTimeout(function() {\n;\n[“a20”].each(Element.remove);\n}, > 10000);’); throw e } > > The above text then fades and after 5 seconds gets removed. > > Does anyone have an idea as to why I am getting that error when I am > trying to fade the li? > > Thanks. ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 24, 2006, 9:58pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/3 "2006-06-24T21:58:07Z")
In production environment i get the following in place of the li: new Effect.Fade(“a20”,{duration:4}); setTimeout(function() { ; [“a20”].each(Element.remove); }, 10000); I am guessing that: config.action\_view.debug\_rjs = false by default in production thats why i am seeing the difference. The above text like in the previous post appears, fades of and then gets removed from the DOM. I am wondering why this text is showing up? Mufaddal K. wrote: > I made small changes to my delete.rjs: > if @element\_id > page.visual\_effect :fade, @element\_id, :duration =\> 4 > page.delay(10.seconds) do > page.remove @element\_id > end > end > > I get this in the browser now: > > try { new Effect.Fade(“a20”,{duration:4}); setTimeout(function() { ; > [“a20”].each(Element.remove); }, 10000); } catch (e) { alert(‘RJS > error:\n\n’ + e.toString()); alert(‘new > Effect.Fade(“a20”,{duration:4});\nsetTimeout(function() > {\n;\n[“a20”].each(Element.remove);\n}, 10000);’); throw e } > > Using Firefox 1.0 on ubuntu, > > Thoughts? ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 24, 2006, 10:16pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/4 "2006-06-24T22:16:01Z")
Drop the :update =\> category.name parameter. Saludos! H On Sat, Jun 24, 2006 at 09:48:57PM +0200, Mufaddal K. wrote: > try { new Effect.Fade(“a20”,{duration:4}); setTimeout(function() { ; > > > I have a list of categories, when I delete one of them, I want that item > > 2. delete.rjs: > > \<%= form\_remote\_tag :url =\> { :action =\> ‘add’ } %\> > > {:action =\> “delete”, :name =\> category.name}%\>] > > Ajax.Updater(‘a18’, ‘/home/delete?name=a18’, {asynchronous:true, > > removed\_email\_address@domain.invalid > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) ## – HoraPe Horacio J. Peñremoved\_email\_address@domain.invalid removed\_email\_address@domain.invalid ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 25, 2006, 3:32am UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/5 "2006-06-25T03:32:09Z")
HoraPe, That worked! thanks. Can you describe as to what was happening before when I had the update parameter specified? I had specified the update parameter in order to specify which dom element I want to affect. I understood this from the docs. By specifying no update parameter what is taken by default? Horacio =?iso-8859-1?Q?J=2E\_Pe=F1a?= wrote: > Drop the :update =\> category.name parameter. > > Saludos! > H > > On Sat, Jun 24, 2006 at 09:48:57PM +0200, Mufaddal K. wrote: > > > try { new Effect.Fade(“a20”,{duration:4}); setTimeout(function() { ; > > > > > I have a list of categories, when I delete one of them, I want that item > > > 2. delete.rjs: > > > \<%= form\_remote\_tag :url =\> { :action =\> ‘add’ } %\> > > > {:action =\> “delete”, :name =\> category.name}%\>] > > > Ajax.Updater(‘a18’, ‘/home/delete?name=a18’, {asynchronous:true, > > > > removed\_email\_address@domain.invalid > > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) > > ## – HoraPe > > Horacio J. > Pe�removed\_email\_address@domain.invalid > removed\_email\_address@domain.invalid ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 25, 2006, 3:49am UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/6 "2006-06-25T03:49:15Z")
> That worked! thanks. Can you describe as to what was happening before > when I had the update parameter specified? I had specified the update > parameter in order to specify which dom element I want to affect. I > understood this from the docs. By specifying no update parameter what is > taken by default? Let me guess (I’ve started playing with prototype yesterday, so take everything I say with a whole bunch of salt) The callback that processes the ajax response does something like: def callback (response, options) if options[:update] page[options[:update]].replace\_html response end if response.type == ‘text/javascript’ page.eval response end end (of course, it’s done in js, but i think this ruby-like syntax can be clearer) ie, if you have defined an update option, it will replace the contents of the page element with the response of the ajax response. update is not meant to be used with rjs, i think. Saludos! H > > > > ``` > > > > <%= form_remote_tag :url => { :action => 'add' } %> > > > > > > > > ``` > > > > Pe???removed\_email\_address@domain.invalid > > removed\_email\_address@domain.invalid > > – > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). > > * * * > > Rails mailing list > removed\_email\_address@domain.invalid > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) ## – HoraPe Horacio J. Peñremoved\_email\_address@domain.invalid removed\_email\_address@domain.invalid ---
**Author:** ![mkhumri](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/258eb7/32.png) [@mkhumri](https://www.ruby-forum.com/u/mkhumri)\ **Post date:** [June 25, 2006, 7:38pm UTC](https://www.ruby-forum.com/t/ajax-fade-effect/64360/7 "2006-06-25T19:38:29Z")
Very correct, if you want the browser to eval the javascript being sent back to the browser with RJS templates, you want to use the Ajax.Request object, but b y specifying the :update parameter, it swtiches to the prototype Ajax.Updater object, which would just be used if you wanted to update a single element on the page at a time. Summary: 1. Use :update simply when you are just updating a DOM element 2. Get rid of :update and use RJS templates when you want to change multiple page elements and use visual effects. * * * Timothy J. [www.foundinteractive.com](http://www.foundinteractive.com) On Jun 24, 2006, at 9:50 PM, Horacio J. Peña wrote: