Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

RJS with toggle_slide if not visible only

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:

    <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.
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS