Forum: Ruby on Rails RJS removing content of div, but not div itself

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
2b891e820c238ded365d035771603f21?d=identicon&s=25 Bill Walton (Guest)
on 2006-04-07 23:32
(Received via mailing list)
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]}") %>
C70d253e33d13e1de4bb82fd06fffdb3?d=identicon&s=25 Wolfgang Borgon (Guest)
on 2006-04-07 23:53
(Received via mailing list)
Bill,
Have you tried replace (which replaces outer HTML)?

http://api.rubyonrails.com/classes/ActionView/Help...


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]}")  %>
41e1579600683eed6c00af9a425268e6?d=identicon&s=25 Edward Frederick (Guest)
on 2006-04-08 02:31
(Received via mailing list)
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
2b891e820c238ded365d035771603f21?d=identicon&s=25 Bill Walton (Guest)
on 2006-04-08 18:24
(Received via mailing list)
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
>
>   def index
>     session[:toggle_color] = 1  # used to create a 'green-bar paper'
effect
This topic is locked and can not be replied to.