RJS removing content of div, but not div itself

Rails
1

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

with three s inside. One of the 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 s get removed from the
. But the
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 ------------------------------

Ingredient list <%= javascript_include_tag "prototype" %> <%= stylesheet_link_tag "listdemo", :media => "all" %>

Ingredient list

Enter the name and amount for each ingredient

<%= render(:partial => 'entry_form') %> 
<div id='my_list'>
</div>
------------------ _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 ----------------------

class = Listline<%= session[:toggle_color] = 1 - session[:toggle_color].to_i %> > <%= params[:name] %> <%= params[:qty] %> <%= link_to_remote("Delete", :update => "item#{@ingredient.id}", :url => {:action => 'delete', :id => @ingredient.id}) %>

--------------------- _remove_linie_form.rjs ------------------------
<%= page.remove("#item{params[:id]}") %>
2

Bill,
Have you tried replace (which replaces outer HTML)?

http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html#M000433

Bill W. [email protected] 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

with three s inside. One of the 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 s get
removed from the
. But the
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 ------------------------------

Ingredient list <%= javascript_include_tag "prototype" %> <%= stylesheet_link_tag "listdemo", :media => "all" %>

Ingredient list

Enter the name and amount for each ingredient

<%= render(:partial => 'entry_form') %> 
<div id='my_list'>
</div>

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

class = Listline<%= session[:toggle_color] = 1 - session[:toggle_color].to_i %> > <%= params[:name] %> <%= params[:qty] %> <%= link_to_remote("Delete", :update => "item#{@ingredient.id}", :url => {:action => 'delete', :id => @ingredient.id}) %>

--------------------- _remove_linie_form.rjs

<%= page.remove(“#item{params[:id]}”) %>
3

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

4

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:




           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 s that contain the links, each contains the
following:
Delete
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 F. 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

On 4/7/06, Bill W. [email protected] 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


with
three s inside. One of the 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 s get removed from the
. But the

doesn’t

def index
session[:toggle_color] = 1 # used to create a ‘green-bar paper’
effect