Trying to delete from a unordered list using ajax

Rails
1

I have a controller method as such:

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

(For the purpose of this exercise, category names are unique)

I have the corresponding delete.rjs file:

if @element_id
page.remove :id => @element_id
page.visual_effect :highlight, ‘categories’, :duration => 3
end

When I click delete for a category “a7”, the category gets deleted from
the database, but I get a javascript error in alert boxes:

First alert message

RJS error:

TypeError: element.parentNode has no properties

I press OK

Second alert message:

[{“id”: “a7”}].each(Element.remove);
new Effect.Highlight(“categories”, {duration:3});

Any ideas as to what’s going wrong?

The original html page is:

Category: <input id="category_name" name="category[name]" size="30"

type=“text” />

_______________________________________
2

Does anyone have ideas as to what the issue is? Am facing a similar
issue

-Thanks

3

Does anyone have ideas as to what the issue is? Am facing a similar
issue

-Thanks

Mufaddal K. wrote:

I have a controller method as such:

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

(For the purpose of this exercise, category names are unique)

I have the corresponding delete.rjs file:

if @element_id
page.remove :id => @element_id
page.visual_effect :highlight, ‘categories’, :duration => 3
end

When I click delete for a category “a7”, the category gets deleted from
the database, but I get a javascript error in alert boxes:

First alert message

RJS error:

TypeError: element.parentNode has no properties

I press OK

Second alert message:

[{“id”: “a7”}].each(Element.remove);
new Effect.Highlight(“categories”, {duration:3});

Any ideas as to what’s going wrong?

4

Try just:

page.remove @element_id

Michael

5

I had tried that:

if @elementId
page.remove @elementId
page.visual_effect :highlight, ‘categories’, :duration => 3
end

Instead of my list, I get the following error when i do that:

try { [“cat2”].each(Element.remove); new
Effect.Highlight(“categories”,{duration:3}); } catch (e) { alert(‘RJS
error:\n\n’ + e.toString());
alert(’[“cat2”].each(Element.remove);\nnew
Effect.Highlight(“categories”,{duration:3});’); throw e }

I get the following generated source in Firefox:

Category: <input id="category_name" name="category[name]" size="30"

type=“text”>

<input name="commit" value="Add" type="submit">
    try { ["cat2"].each(Element.remove); new Effect.Highlight("categories",{duration:3}); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('[\"cat2\"].each(Element.remove);\nnew Effect.Highlight(\"categories\",{duration:3});'); throw e }

Any ideas?

Michael T. wrote:

Try just:

page.remove @element_id

Michael

6

Sorry, typo in my previous post:

if @elementId
page.remove @element_id
end

I get the following javascript errors when i click delete:

RJS error:

TypeError: element has no properties

[null].each(Element.remove);

[Trying to understand why I am getting the above “null”]

I get the following generated source in Firefox:

Category: <input id="category_name" name="category[name]" size="30"

type=“text”>

<input name="commit" value="Add" type="submit">
    try { [null].each(Element.remove); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('[null].each(Element.remove);'); throw e }

Any ideas?

7

Read: if @elementId as if @element_id above :slight_smile: (Need sleep)

8

Mufaddal K. wrote:

if @elementId
page.remove @element_id
end

I didn’t see your initial post and so am not sure if this is relevant,
but
‘page’ works on DOM elements. Unless your instance variable somehow
contains the id of a DOM element, I don’t think this will work.

hth,
Bill

9

Oh yeah…

The other thing could be the @elementId vs. @element_id thing.

Best regards,
Bill
----- Original Message -----
From: “Bill W.” [email protected]
To: [email protected]
Sent: Thursday, June 22, 2006 9:20 PM
Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list
using
ajax

10

Bill,

The @element_id contains the id of a DOM element. I am probably missing
something really small here …

Any thoughts?

Bill W. wrote:

Oh yeah…

The other thing could be the @elementId vs. @element_id thing.

Best regards,
Bill
----- Original Message -----
From: “Bill W.” [email protected]
To: [email protected]
Sent: Thursday, June 22, 2006 9:20 PM
Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list
using
ajax

11

Finally figured it out! Just putting it out here for others.

Basically, what I had wrong was my call to link_to_remote:

    <% @categories.each do |category| -%>
  • <%= category.name %> [<%=link_to_remote "Delete", :update => 'categories', :url => {:action => "delete", :name => category.name}%>]
    • <% end -%>

The correct call is:

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

The update clause in the link_to_remote identifies which DOM element
will be updated as a result of the ajax call. In my case this needed to
be the id of the li not the id of the ul!

Mufaddal K. wrote:

Bill,

The @element_id contains the id of a DOM element. I am probably missing
something really small here …

Any thoughts?

Bill W. wrote:

Oh yeah…

The other thing could be the @elementId vs. @element_id thing.

Best regards,
Bill
----- Original Message -----
From: “Bill W.” [email protected]
To: [email protected]
Sent: Thursday, June 22, 2006 9:20 PM
Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list
using
ajax