How Toggle Show/Hide Button Image and Action ?

rubyonrails-talk
1

Rails 1.2.6

I have a link_to_remote which uses graphic button for the display.

<%= link_to_remote '<img src="/controls/btn_narrativeHidden.gif" alt="" width="90" height="20" id="btnShowNarrative" />',   :url => {:controller => 'narrative', :action => 'show'} %>

When that button is clicked, an RJS file adds content to a div and reveals it.

At the same time, I want that initial button to change. Essentially what my brain wants is for the whole link_to_remote code to change to this

<%= link_to_remote '<img src="/controls/btn_narrativeShown.gif" alt="" width="90" height="20" id="btnHideNarrative" />',   :url => {:controller => 'narrative', :action => 'hide'} %>

So, when the button is clicked, its picture & its action both "toggle"

I can't figure out how to do that and the best way to architect the pieces.

I'm just getting started with using Ajax/RJS, and so far my RJS file is bare bones basics:

   page.insert_html :top, 'narrative', "example text to insert"    page.visual_effect :blind_down, 'narrative', :duration => 0.5

What would the RJS be to replace/modify that link_to_remote code ?

Any clues appreciated.

-- gw

2

GW: take a peek at the link_to_remote API: http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper.html#M000958

In particular, notice the additional paramters like :before, :after, :complete, etc.

Use those to call some javascript code to either replace the image or to do a hide/show. In my code, I have something like:

Element.toggle('custom_submit_tag', 'upload_progress');

and then the end of the form is:

  <div id="upload_progress" style="display:none"><%= image_tag "progress_bar.gif" %></div>   <div id="custom_submit_tag"><%= custom_submit_tag 'Save' %></div>

Perhaps just stack the two images right after each other, hide one with the style display:none trick then toggle the shown and hidden images on the :before hook.

-Danimal