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

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

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.

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:

     if @element_id
       page.visual_effect :fade, @element_id
       page.delay(5.seconds) do
          page.remove @element_id
       end
     end
    
  2. 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:

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.

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?

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]

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]

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]

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

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

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs