Ajax fade effect

mkhumri · June 24, 2006, 7:53pm

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:

home_controller:

def delete
@category = Category.find_by_name(params[:name])
@element_id = @category.name
Category.delete_all([“name = ?”, @category.name])
end

delete.rjs:

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

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 %>

[<%=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.

mkhumri · June 24, 2006, 9:48pm

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:

home_controller:

def delete
@category = Category.find_by_name(params[:name])
@element_id = @category.name
Category.delete_all([“name = ?”, @category.name])
end
delete.rjs:
 if @element_id
   page.visual_effect :fade, @element_id
   page.delay(5.seconds) do
      page.remove @element_id
   end
 end
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 %> 
[<%=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.

mkhumri · June 24, 2006, 9:58pm

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?

mkhumri · June 24, 2006, 10:16pm

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,

[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
HoraPe

Horacio J.
Peñ[email protected]
[email protected]

mkhumri · June 25, 2006, 3:32am

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,

[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
HoraPe

Horacio J.
Peï¿½[email protected]
[email protected]

mkhumri · June 25, 2006, 3:49am

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' } %>
[email protected]
[email protected]
–
Posted via http://www.ruby-forum.com/.

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
HoraPe

Horacio J.
Peñ[email protected]
[email protected]

mkhumri · June 25, 2006, 7:38pm

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:

Use :update simply when you are just updating a DOM element
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

On Jun 24, 2006, at 9:50 PM, Horacio J. Peña wrote:

Ajax fade effect

– HoraPe

– HoraPe

– HoraPe

–
HoraPe

–
HoraPe

–
HoraPe