thr3ads.net - Rails - [Rails] Ajax fade effect [Jun 2006]

If this information is useful, please help other people find it:
Share via:

Mufaddal Khumri

2006-Jun-24 17:53 UTC

[Rails] Ajax fade effect

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

2. delete.rjs:

        if @element_id
	        page.visual_effect :fade, @element_id
 	        page.delay(5.seconds) do
 		       page.remove @element_id
	        end
        end

3. index.rhtml:

        <%= form_remote_tag :url => { :action =>
''add'' } %>

	         Category: <%= text_field ''category'',
''name'' %>
	         <%= submit_tag ''Add'' %>

        <%= end_form_tag %>

        <ul id="categories">
	         <% @categories.each do |category| -%>
    	               <li id="<%=category.name%>"><%=
category.name %>
[<span><%=link_to_remote "Delete", :update =>
category.name, :url =>
{:action => "delete", :name =>
category.name}%></span>]</li>
	         <% end -%>
        </ul>

When I now try to delete, lets say an item a20 from a list like this:

<ul id="categories">
	    	<li id="a20">a20 [<span><a href="#"
onclick="new
Ajax.Updater(''a20'', ''/home/delete?name=a20'',
{asynchronous:true,
evalScripts:true}); return
false;">Delete</a></span>]</li>
	    	<li id="a18">a18 [<span><a href="#"
onclick="new
Ajax.Updater(''a18'', ''/home/delete?name=a18'',
{asynchronous:true,
evalScripts:true}); return
false;">Delete</a></span>]</li>
</ul>

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.

-- 
Posted via http://www.ruby-forum.com/.

Mufaddal Khumri

2006-Jun-24 19:49 UTC

head link

[Rails] Re: Ajax fade effect

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 Khumri 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
> 
> 2. delete.rjs:
> 
>         if @element_id
> 	        page.visual_effect :fade, @element_id
>  	        page.delay(5.seconds) do
>  		       page.remove @element_id
> 	        end
>         end
> 
> 3. index.rhtml:
> 
>         <%= form_remote_tag :url => { :action =>
''add'' } %>
> 
> 	         Category: <%= text_field ''category'',
''name'' %>
> 	         <%= submit_tag ''Add'' %>
> 
>         <%= end_form_tag %>
> 
>         <ul id="categories">
> 	         <% @categories.each do |category| -%>
>     	               <li
id="<%=category.name%>"><%= category.name %>
> [<span><%=link_to_remote "Delete", :update =>
category.name, :url =>
> {:action => "delete", :name =>
category.name}%></span>]</li>
> 	         <% end -%>
>         </ul>
> 
> When I now try to delete, lets say an item a20 from a list like this:
> 
> <ul id="categories">
> 	    	<li id="a20">a20 [<span><a
href="#" onclick="new
> Ajax.Updater(''a20'',
''/home/delete?name=a20'', {asynchronous:true,
> evalScripts:true}); return
false;">Delete</a></span>]</li>
> 	    	<li id="a18">a18 [<span><a
href="#" onclick="new
> Ajax.Updater(''a18'',
''/home/delete?name=a18'', {asynchronous:true,
> evalScripts:true}); return
false;">Delete</a></span>]</li>
> </ul>
> 
> 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.

-- 
Posted via http://www.ruby-forum.com/.

Mufaddal Khumri

2006-Jun-24 19:58 UTC

head link

[Rails] Re: Ajax fade effect

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 Khumri 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?
> 
-- 
Posted via http://www.ruby-forum.com/.

Horacio J. Peña

2006-Jun-24 20:13 UTC

head link

[Rails] Re: Ajax fade effect

Drop the :update => category.name parameter. 

Saludos!
H

On Sat, Jun 24, 2006 at 09:48:57PM +0200, Mufaddal Khumri
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?
> 
> Mufaddal Khumri 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
> > 
> > 2. delete.rjs:
> > 
> >         if @element_id
> > 	        page.visual_effect :fade, @element_id
> >  	        page.delay(5.seconds) do
> >  		       page.remove @element_id
> > 	        end
> >         end
> > 
> > 3. index.rhtml:
> > 
> >         <%= form_remote_tag :url => { :action =>
''add'' } %>
> > 
> > 	         Category: <%= text_field ''category'',
''name'' %>
> > 	         <%= submit_tag ''Add'' %>
> > 
> >         <%= end_form_tag %>
> > 
> >         <ul id="categories">
> > 	         <% @categories.each do |category| -%>
> >     	               <li
id="<%=category.name%>"><%= category.name %>
> > [<span><%=link_to_remote "Delete", :update =>
category.name, :url =>
> > {:action => "delete", :name =>
category.name}%></span>]</li>
> > 	         <% end -%>
> >         </ul>
> > 
> > When I now try to delete, lets say an item a20 from a list like this:
> > 
> > <ul id="categories">
> > 	    	<li id="a20">a20 [<span><a
href="#" onclick="new
> > Ajax.Updater(''a20'',
''/home/delete?name=a20'', {asynchronous:true,
> > evalScripts:true}); return
false;">Delete</a></span>]</li>
> > 	    	<li id="a18">a18 [<span><a
href="#" onclick="new
> > Ajax.Updater(''a18'',
''/home/delete?name=a18'', {asynchronous:true,
> > evalScripts:true}); return
false;">Delete</a></span>]</li>
> > </ul>
> > 
> > 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.
> 
> 
> -- 
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
-- 
					HoraPe
---
Horacio J. Pe?a
horape@compendium.com.ar
horape@uninet.edu

Mufaddal Khumri

2006-Jun-25 01:32 UTC

head link

[Rails] Re: Re: Ajax fade effect

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 Khumri 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}%></span>]</li>
>> > Ajax.Updater(''a18'',
''/home/delete?name=a18'', {asynchronous:true,
>> > 
>> Rails@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails
> 
> --
> 					HoraPe
> ---
> Horacio J. 
> Pe?ahorape@compendium.com.ar
> horape@uninet.edu

-- 
Posted via http://www.ruby-forum.com/.

Horacio J. Peña

2006-Jun-25 01:47 UTC

head link

[Rails] Re: Re: Ajax fade effect

> 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
> 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 Khumri 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}%></span>]</li>
> >> > Ajax.Updater(''a18'',
''/home/delete?name=a18'', {asynchronous:true,
> >> > 
> >> Rails@lists.rubyonrails.org
> >> http://lists.rubyonrails.org/mailman/listinfo/rails
> > 
> > --
> > 					HoraPe
> > ---
> > Horacio J. 
> > Pe???ahorape@compendium.com.ar
> > horape@uninet.edu
> 
> 
> -- 
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
-- 
					HoraPe
---
Horacio J. Pe?a
horape@compendium.com.ar
horape@uninet.edu

Timothy Johnson

2006-Jun-25 17:37 UTC

head link

[Rails] Re: Re: Ajax fade effect

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 Johnson
www.foundinteractive.com



On Jun 24, 2006, at 9:50 PM, Horacio J. Pe?a wrote:
>> 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
>
>> 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 Khumri 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}%></span>]</li>
>>>>> Ajax.Updater(''a18'',
''/home/delete?name=a18'', {asynchronous:true,
>>>>>
>>>> Rails@lists.rubyonrails.org
>>>> http://lists.rubyonrails.org/mailman/listinfo/rails
>>>
>>> --
>>> 					HoraPe
>>> ---
>>> Horacio J.
>>> Pe???ahorape@compendium.com.ar
>>> horape@uninet.edu
>>
>>
>> -- 
>> Posted via http://www.ruby-forum.com/.
>> _______________________________________________
>> Rails mailing list
>> Rails@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails
>
> -- 
> 					HoraPe
> ---
> Horacio J. Pe?a
> horape@compendium.com.ar
> horape@uninet.edu
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails

Reasonably Related Threads

Search for more apparently analagous threads

Rails - Jun 2006 - Ajax fade effect

[Rails] Ajax fade effect

[Rails] Re: Ajax fade effect

[Rails] Re: Ajax fade effect

[Rails] Re: Ajax fade effect

[Rails] Re: Re: Ajax fade effect

[Rails] Re: Re: Ajax fade effect

[Rails] Re: Re: Ajax fade effect

Reasonably Related Threads