Hi,
I''m creating a list of ingredients on a page. When the user clicks the
''Add Ingredient'' button a record gets added to the db and the
ingredient gets added to the page. On the page, each record is represented by a
<div> with three <span>s inside. One of the <span>s has a
link_to_remote to ''delete'' the ingredient. When the link gets
used, the record gets deleted from the db and all three <span>s get
removed from the <div>. But the <div> doesn''t get removed.
I''ve been at it all day and can''t figure it out. Thanks in
advance to anyone who can give me some help understanding this. I''ve
included some code below.
Best regards,
Bill
--------------------- controller ----------------------
class ListdemoController < ApplicationController
def index
session[:toggle_color] = 1 # used to create a ''green-bar
paper'' effect
end
def add_item
@ingredient = Ingredient.new
@ingredient.name = params[:name]
@ingredient.qty = params[:qty]
@ingredient.save
render(:partial => ''line_form'')
end
def delete
Ingredient.find(params[:id]).destroy
render(:partial => ''remove_line_form'' )
end
end
-------------------- index.rhtml ------------------------------
<html>
<head>
<title>Ingredient list</title>
<%= javascript_include_tag "prototype" %>
<%= stylesheet_link_tag "listdemo", :media =>
"all" %>
</head>
<body>
<h3>Ingredient list</h3>
<p> Enter the name and amount for each ingredient</p>
<div class = "Entryline">
<%= render(:partial => ''entry_form'') %>
</div>
<div id=''my_list''>
</div>
</body>
</html>
------------------ _entry_form.rhtml -------------------
<%= form_remote_tag(:update => ''my_list'',
:url => {:action => :add_item},
:position => ''bottom'') %>
Name:
<%= text_field_tag :name %>
Amount:
<%= text_field_tag :qty %>
<%= submit_tag ''Add Ingredient'' %>
<%= end_form_tag %>
----------------- _line_form.rhtml ----------------------
<div id = item<%= @ingredient.id %> class = Listline<%=
session[:toggle_color] = 1 - session[:toggle_color].to_i %> >
<span class = ''leftcol''> <%= params[:name] %>
</span>
<span class = ''midcol''> <%= params[:qty] %>
</span>
<span class = ''rightcol''>
<%= link_to_remote("Delete",
:update => "item#{@ingredient.id}",
:url => {:action => ''delete'',
:id => @ingredient.id})
%>
</span>
</div>
--------------------- _remove_linie_form.rjs ------------------------
<%= page.remove("#item{params[:id]}") %>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060407/c4d99484/attachment.html
Wolfgang Borgon
2006-Apr-07 21:50 UTC
[Rails] RJS removing content of div, but not div itself
Bill,
Have you tried replace (which replaces outer HTML)?
http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html#M000433
Bill Walton <bill.walton@charter.net> wrote: Hi,
I''m creating a list of ingredients on a page. When the user clicks
the ''Add Ingredient'' button a record gets added to the db and
the ingredient gets added to the page. On the page, each record is represented
by a <div> with three <span>s inside. One of the <span>s has
a link_to_remote to ''delete'' the ingredient. When the link
gets used, the record gets deleted from the db and all three <span>s get
removed from the <div>. But the <div> doesn''t get
removed. I''ve been at it all day and can''t figure it out.
Thanks in advance to anyone who can give me some help understanding this.
I''ve included some code below.
Best regards,
Bill
--------------------- controller ----------------------
class ListdemoController < ApplicationController
def index
session[:toggle_color] = 1 # used to create a ''green-bar
paper'' effect
end
def add_item
@ingredient = Ingredient.new
@ingredient.name = params[:name]
@ingredient.qty = params[:qty]
@ingredient.save
render(:partial => ''line_form'')
end
def delete
Ingredient.find(params[:id]).destroy
render(:partial => ''remove_line_form'' )
end
end
-------------------- index.rhtml ------------------------------
<html>
<head>
<title>Ingredient list</title>
<%= javascript_include_tag "prototype" %>
<%= stylesheet_link_tag "listdemo", :media =>
"all" %>
</head>
<body>
<h3>Ingredient list</h3>
<p> Enter the name and amount for each ingredient</p>
<div class = "Entryline">
<%= render(:partial => ''entry_form'') %>
</div>
<div id=''my_list''>
</div>
</body>
</html>
------------------ _entry_form.rhtml -------------------
<%= form_remote_tag(:update => ''my_list'',
:url => {:action => :add_item},
:position => ''bottom'') %>
Name:
<%= text_field_tag :name %>
Amount:
<%= text_field_tag :qty %>
<%= submit_tag ''Add Ingredient'' %>
<%= end_form_tag %>
----------------- _line_form.rhtml ----------------------
<div id = item<%= @ingredient.id %> class = Listline<%=
session[:toggle_color] = 1 - session[:toggle_color].to_i %> >
<span class = ''leftcol''> <%= params[:name] %>
</span>
<span class = ''midcol''> <%= params[:qty] %>
</span>
<span class = ''rightcol''>
<%= link_to_remote("Delete",
:update => "item#{@ingredient.id}",
:url => {:action => ''delete'',
:id => @ingredient.id})
%>
</span>
</div>
--------------------- _remove_linie_form.rjs ------------------------
<%= page.remove("#item{params[:id]}") %>
_______________________________________________
Rails mailing list
Rails@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails
---------------------------------
Yahoo! Messenger with Voice. Make PC-to-Phone Calls to the US (and 30+
countries) for 2?/min or less.
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060407/f7bfa2d6/attachment.html
Edward Frederick
2006-Apr-08 00:30 UTC
[Rails] RJS removing content of div, but not div itself
Bill, You need to remove the :update option from your link_to_remote. Your RJS template generates script to be eval''ed by the browser which removes the DIV--you don''t need to :update anything. That being said, you don''t need to use RJS here. Just :update the div you want to remove, and render :nothing => true in the controller. Save the RJS for when you want to delete multiple things in bulk. Cheers, Ed www.edwardfrederick.com On 4/7/06, Bill Walton <bill.walton@charter.net> wrote:> > Hi, > > I''m creating a list of ingredients on a page. When the user clicks the ''Add > Ingredient'' button a record gets added to the db and the ingredient gets > added to the page. On the page, each record is represented by a <div> with > three <span>s inside. One of the <span>s has a link_to_remote to ''delete'' > the ingredient. When the link gets used, the record gets deleted from the > db and all three <span>s get removed from the <div>. But the <div> doesn''t > get removed. I''ve been at it all day and can''t figure it out. Thanks in > advance to anyone who can give me some help understanding this. I''ve > included some code below. > > Best regards, > Bill > > > --------------------- controller ---------------------- > class ListdemoController < ApplicationController > > def index > session[:toggle_color] = 1 # used to create a ''green-bar paper'' effect > end > > def add_item > @ingredient = Ingredient.new > @ingredient.name = params[:name] > @ingredient.qty = params[:qty] > @ingredient.save > render(:partial => ''line_form'') > end > > def delete > Ingredient.find(params[:id]).destroy > render(:partial => ''remove_line_form'' ) > end > > end > > > -------------------- index.rhtml ------------------------------ > <html> > <head> > <title>Ingredient list</title> > <%= javascript_include_tag "prototype" %> > <%= stylesheet_link_tag "listdemo", :media => "all" %> > </head> > <body> > <h3>Ingredient list</h3> > <p> Enter the name and amount for each ingredient</p> > <div class = "Entryline"> > <%= render(:partial => ''entry_form'') %> > </div> > > <div id=''my_list''> > </div> > > </body> > </html> > ------------------ _entry_form.rhtml ------------------- > <%= form_remote_tag(:update => ''my_list'', > :url => {:action => :add_item}, > :position => ''bottom'') %> > Name: > <%= text_field_tag :name %> > Amount: > <%= text_field_tag :qty %> > <%= submit_tag ''Add Ingredient'' %> > <%= end_form_tag %> > > ----------------- _line_form.rhtml ---------------------- > <div id = item<%= @ingredient.id %> class = Listline<%> session[:toggle_color] = 1 - session[:toggle_color].to_i %> > > <span class = ''leftcol''> <%= params[:name] %> </span> > <span class = ''midcol''> <%= params[:qty] %> </span> > <span class = ''rightcol''> > <%= link_to_remote("Delete", > :update => "item#{@ingredient.id}", > :url => {:action => ''delete'', > :id => @ingredient.id}) > %> > </span> > </div> > > --------------------- _remove_linie_form.rjs ------------------------ > <%= page.remove("#item{params[:id]}") %> > > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails > > >
Hi Edward,
Thanks very much for your response. It was close, and it put me on a
productive track. I''m responding with my original post, including
code,
still in place below in hopes it will help folks searching the archives in
the future. I''ve included the various cases of the changes I tried
this
morning with the results of each just below.
Thanks again for your help,
Bill
----------- changes to the code below and results --------------
NOTE: In my original posting the _remove_line_form.rjs file had a syntax
error. I had <%= page.remove("#item{params[:id]}") %>.
It''s corrected
below to <%= page.remove("item#{params[:id]}") %>
Change #1
a) in link_to_remote in _line_form.rhtml, :update =>
"item#{@ingredient.id}"
b) in the ''delete'' action in the controller,
render(:nothing => ''true'')
Results
IE6) content of the DIV is deleted but DIV remains; visually, the words
are gone but the DIV is still visible
FF1.5) content of the DIV is deleted but DIV remains; visually, the
words are gone and the DIV is not visible
Change #2
a) in link_to_remote in _line_form.rhtml, *remove* the :update
b) in the ''delete'' action in the controller,
render(:nothing => ''true'')
Results
IE6) DIV remains and is visible
FF1.5) DIV remains and is visible
Change #3 (This is the one that works as required)
a) in link_to_remote in _line_form.rhtml, *remove* the :update =>
"item#{@ingredient.id}"
b) in the ''delete'' action in the controller,
render(:partial =>
''remove_line_form'')
Results
IE6) DIV is removed and is not visible
FF1.5) NOTE: I believe the results I got here are either a bug in
Firebug, or in RJS
The DIV is not visible BUT as viewed in
Firebug->Inspector->Source, the DIV remains,
HOWEVER... it''s position in the listing is changed AND
the
DIVs that originally followed
it are repeated. So if the original list was:
<div class="Listline0" id="item1">
<div class="Listline0" id="item2">
<div class="Listline0" id="item3">
<div class="Listline0" id="item4">
the listing displayed after deleting item2 is:
<div class="Listline0" id="item1">
<div class="Listline0" id="item3">
<div class="Listline0" id="item4">
<div class="Listline0" id="item2">
<div class="Listline0" id="item3">
<div class="Listline0" id="item4">
This listing looks like a bug in Firebug.
OTOH, inspecting the <span>s that contain the links, each contains the
following:
<a onclick= "......;" href="#">Delete</a>
That looks, to someone like me who knows nothing at all about RJS, like a
bug in RJS and perhaps that is what''s causing the problem in Firebug.
It''s
way beyond me to know, but I thought it was worth documenting.
----------- Original message.
Edward Frederick wrote:
You need to remove the :update option from your link_to_remote. Your
RJS template generates script to be eval''ed by the browser which
removes the DIV--you don''t need to :update anything.
That being said, you don''t need to use RJS here.
Just :update the div you want to remove, and render :nothing => true
in the controller. Save the RJS for when you want to delete multiple
things in bulk.
Cheers,
Ed
www.edwardfrederick.com
On 4/7/06, Bill Walton <bill.walton@charter.net>
wrote:>
> Hi,
>
> I''m creating a list of ingredients on a page. When the user
clicks the
''Add> Ingredient'' button a record gets added to the db and the
ingredient gets
> added to the page. On the page, each record is represented by a
<div>
with> three <span>s inside. One of the <span>s has a link_to_remote
to ''delete''
> the ingredient. When the link gets used, the record gets deleted from the
> db and all three <span>s get removed from the <div>. But the
<div>
doesn''t> get removed. I''ve been at it all day and can''t figure it
out. Thanks in
> advance to anyone who can give me some help understanding this.
I''ve
> included some code below.
>
> Best regards,
> Bill
>
>
> --------------------- controller ----------------------
> class ListdemoController < ApplicationController
>
> def index
> session[:toggle_color] = 1 # used to create a ''green-bar
paper''
effect> end
>
> def add_item
> @ingredient = Ingredient.new
> @ingredient.name = params[:name]
> @ingredient.qty = params[:qty]
> @ingredient.save
> render(:partial => ''line_form'')
> end
>
> def delete
> Ingredient.find(params[:id]).destroy
> render(:partial => ''remove_line_form'' )
> end
>
> end
>
>
> -------------------- index.rhtml ------------------------------
> <html>
> <head>
> <title>Ingredient list</title>
> <%= javascript_include_tag "prototype" %>
> <%= stylesheet_link_tag "listdemo", :media =>
"all" %>
> </head>
> <body>
> <h3>Ingredient list</h3>
> <p> Enter the name and amount for each ingredient</p>
> <div class = "Entryline">
> <%= render(:partial => ''entry_form'') %>
> </div>
>
> <div id=''my_list''>
> </div>
>
> </body>
> </html>
> ------------------ _entry_form.rhtml -------------------
> <%= form_remote_tag(:update => ''my_list'',
> :url => {:action => :add_item},
> :position => ''bottom'') %>
> Name:
> <%= text_field_tag :name %>
> Amount:
> <%= text_field_tag :qty %>
> <%= submit_tag ''Add Ingredient'' %>
> <%= end_form_tag %>
>
> ----------------- _line_form.rhtml ----------------------
> <div id = item<%= @ingredient.id %> class = Listline<%>
session[:toggle_color] = 1 - session[:toggle_color].to_i %> >
> <span class = ''leftcol''> <%= params[:name]
%> </span>
> <span class = ''midcol''> <%= params[:qty]
%> </span>
> <span class = ''rightcol''>
> <%= link_to_remote("Delete",
> :update => "item#{@ingredient.id}",
> :url => {:action => ''delete'',
> :id => @ingredient.id})
> %>
> </span>
> </div>
>
> --------------------- _remove_line_form.rjs ------------------------
> <%= page.remove("item#{params[:id]}") %>
>
>