RJS with toggle_slide if not visible only
<div style="height: 30px">
<div style="float: left; padding: 0 0 0 180px">
<%= link_to_remote("test_visibility" ,
:with => "'is_visible=' + Element.visible('list_div')",
:loading => "Element.show('getting_results')",
:complete => "Element.hide('getting_results')",
:failure => "alert('An error occured, please email us directly!')",
:url => { :action => 'one_action' }) %>
</div>
<div id="getting_results" style="float: left; padding: 3px 0 0 30px; display: none;">
<%= image_tag "ajax-loader.gif", :class => "image", :alt => "loading..." %>
</div>
</div>
<div id="list_div" style="display: none;" >
</div>
And in my controller, I have the following code:
def one_action render :update do | page | page.replace_html 'list_div', :partial => 'one_partial' if params['is_visible'] == 'false' page.visual_effect :toggle_slide, 'list_div', :duration => 2 end end end
How it works?
Element.visible('list_div')is a prototype function that returns false if the element is not visible and true if it is. In the above case, we have the orginial visibility of the div to be "display: none". Thus the first time the action is called, the Ajax call will send the parameter false to the action. This will make the div appear. For subsequent requests, the value of visibility will be true, thus only replacing the div.