RJS with toggle_slide if not visible only

carlharroch (Carl Harroch) — Tue, 26 Dec 2006 15:12:50 GMT

RJS is very powerful. here is a small code snippet that shows how to do a toggle on a div if NOT visible. If the div is visible, it just exchange it. Here is my rhtml code:



    

        

            <%= 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' }) %>

        

        

            <%= image_tag "ajax-loader.gif", :class => "image", :alt => "loading..." %>

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.

DZone Snippets: link_to_visibility code

RJS with toggle_slide if not visible only