Mufaddal Khumri
2006-Jun-19 06:18 UTC
[Rails] Trying to delete from a unordered list using ajax
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:
________________________________________
<script src="/javascripts/prototype.js?1150529788"
type="text/javascript"></script>
<script src="/javascripts/effects.js?1150529788"
type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1150529788"
type="text/javascript"></script>
<script src="/javascripts/controls.js?1150529788"
type="text/javascript"></script>
<script src="/javascripts/application.js?1150525685"
type="text/javascript"></script>
<form action="/home/add" method="post" onsubmit="new
Ajax.Request(''/home/add'', {asynchronous:true,
evalScripts:true,
parameters:Form.serialize(this)}); return false;">
Category: <input id="category_name"
name="category[name]" size="30"
type="text" />
<input name="commit" type="submit" value="Add"
/>
</form>
<ul id="categories">
<li id="a7">a7 [<span><a href="#"
onclick="new
Ajax.Updater(''categories'',
''/home/delete?name=a7'', {asynchronous:true,
evalScripts:true}); return
false;">Delete</a></span>]</li>
<li id="a8">a8 [<span><a href="#"
onclick="new
Ajax.Updater(''categories'',
''/home/delete?name=a8'', {asynchronous:true,
evalScripts:true}); return
false;">Delete</a></span>]</li>
</ul>
_______________________________________
--
Posted via http://www.ruby-forum.com/.
Does anyone have ideas as to what the issue is? Am facing a similar issue -Thanks -- Posted via http://www.ruby-forum.com/.
Does anyone have ideas as to what the issue is? Am facing a similar issue -Thanks Mufaddal Khumri 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?-- Posted via http://www.ruby-forum.com/.
Michael Trier
2006-Jun-20 21:34 UTC
[Rails] Re: Trying to delete from a unordered list using ajax
Try just: page.remove @element_id Michael
Mufaddal Khumri
2006-Jun-22 23:43 UTC
[Rails] Re: Re: Trying to delete from a unordered list using ajax
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:
<html><head><script
src="/javascripts/prototype.js?1150919434"
type="text/javascript"></script><script
src="/javascripts/effects.js?1150919435"
type="text/javascript"></script><script
src="/javascripts/dragdrop.js?1150919435"
type="text/javascript"></script><script
src="/javascripts/controls.js?1150919436"
type="text/javascript"></script><script
src="/javascripts/application.js?1150919436"
type="text/javascript"></script></head>
<body><form action="/home/add" method="post"
onsubmit="new
Ajax.Request(''/home/add'', {asynchronous:true,
evalScripts:true,
parameters:Form.serialize(this)}); return false;">
Category: <input id="category_name"
name="category[name]" size="30"
type="text">
<input name="commit" value="Add"
type="submit">
</form>
<ul style="background-image: none; background-color: transparent;"
id="categories">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
}</ul></body></html>
Any ideas?
Michael Trier wrote:> Try just:
>
> page.remove @element_id
>
> Michael
--
Posted via http://www.ruby-forum.com/.
Mufaddal Khumri
2006-Jun-22 23:48 UTC
[Rails] Re: Re: Trying to delete from a unordered list using ajax
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:
<html><head><script
src="/javascripts/prototype.js?1150919434"
type="text/javascript"></script><script
src="/javascripts/effects.js?1150919435"
type="text/javascript"></script><script
src="/javascripts/dragdrop.js?1150919435"
type="text/javascript"></script><script
src="/javascripts/controls.js?1150919436"
type="text/javascript"></script><script
src="/javascripts/application.js?1150919436"
type="text/javascript"></script></head>
<body><form action="/home/add" method="post"
onsubmit="new
Ajax.Request(''/home/add'', {asynchronous:true,
evalScripts:true,
parameters:Form.serialize(this)}); return false;">
Category: <input id="category_name"
name="category[name]" size="30"
type="text">
<input name="commit" value="Add"
type="submit">
</form>
<ul id="categories">try {
[null].each(Element.remove);
} catch (e) { alert(''RJS error:\n\n'' + e.toString());
alert(''[null].each(Element.remove);''); throw e
}</ul></body></html>
Any ideas?
--
Posted via http://www.ruby-forum.com/.
Mufaddal Khumri
2006-Jun-22 23:50 UTC
[Rails] Re: Re: Trying to delete from a unordered list using ajax
Read: if @elementId as if @element_id above :) (Need sleep) -- Posted via http://www.ruby-forum.com/.
Bill Walton
2006-Jun-23 02:20 UTC
[Rails] Re: Re: Trying to delete from a unordered list using ajax
Mufaddal Khumri 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
Bill Walton
2006-Jun-23 02:28 UTC
[Rails] Re: Re: Trying to delete from a unordered list using ajax
Oh yeah... The other thing could be the @elementId vs. @element_id thing. Best regards, Bill ----- Original Message ----- From: "Bill Walton" <bill.walton@charter.net> To: <rails@lists.rubyonrails.org> Sent: Thursday, June 22, 2006 9:20 PM Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list using ajax> Mufaddal Khumri 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 > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Mufaddal Khumri
2006-Jun-23 04:14 UTC
[Rails] Re: Re: Re: Trying to delete from a unordered list using aja
Bill, The @element_id contains the id of a DOM element. I am probably missing something really small here ... Any thoughts? Bill Walton wrote:> Oh yeah... > > The other thing could be the @elementId vs. @element_id thing. > > Best regards, > Bill > ----- Original Message ----- > From: "Bill Walton" <bill.walton@charter.net> > To: <rails@lists.rubyonrails.org> > Sent: Thursday, June 22, 2006 9:20 PM > Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list > using > ajax-- Posted via http://www.ruby-forum.com/.
Mufaddal Khumri
2006-Jun-23 05:00 UTC
[Rails] Re: Re: Re: Trying to delete from a unordered list using aja
Finally figured it out! Just putting it out here for others.
Basically, what I had wrong was my call to link_to_remote:
<ul id="categories">
<% @categories.each do |category| -%>
<li id="<%=category.name%>"><%= category.name
%>
[<span><%=link_to_remote "Delete", :update =>
''categories'',
:url => {:action => "delete", :name =>
category.name}%></span>]</li>
<% end -%>
</ul>
The correct call is:
<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>
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 Khumri wrote:> Bill,
>
> The @element_id contains the id of a DOM element. I am probably missing
> something really small here ...
>
> Any thoughts?
>
> Bill Walton wrote:
>> Oh yeah...
>>
>> The other thing could be the @elementId vs. @element_id thing.
>>
>> Best regards,
>> Bill
>> ----- Original Message -----
>> From: "Bill Walton" <bill.walton@charter.net>
>> To: <rails@lists.rubyonrails.org>
>> Sent: Thursday, June 22, 2006 9:20 PM
>> Subject: Re: [Rails] Re: Re: Trying to delete from a unordered list
>> using
>> ajax
--
Posted via http://www.ruby-forum.com/.