Topic: example request for hide/unhide div toggle using UJS

Can anybody provide me an example how to implement a hide/unhide toggle of a div using link_to in Rails 3.0?
I want to be able to hide/unhide a partial render in a div using a link_to.
By default the partial should not be shown.

I've been trying to do this with the rails built-in javascript framework and jquery but I don't seem to be able to get it to work.

Any help would be greatly appreciated

Thanks in advance

Johan

Re: example request for hide/unhide div toggle using UJS

You may have already resolved this....if not, maybe this will help:

In your view create an empty DIV
<div id="toggle_panel"><div>

Create your link with:
link_to_remote "Toggle", :url => {:controller => 'name_of_controller',  :action => 'toggle_div"}

In the controller, add a method:
def toggle_div     
     render :update do |page|
          page.toggle('toggle_div")
     end
end

Make sure that you add the action 'toggle_div' to the resources in the routes.db file for the controller:
map.resources :your_controller, :collection => {:toggle_div => :get}

That should do it.....

Re: example request for hide/unhide div toggle using UJS

Thx, I'll give it a try
I think link_to_remote is no longer supported in Rails 3.x but I'll manage to refactor it to Rails 3 code.

Your help is appreciated smile

Re: example request for hide/unhide div toggle using UJS

Don't use link_to_remote, it's deprecated in rails 3. If you were in rails 2 that'd be fine.

You don't need link_to, since we're going to link to a part of the page that's hidden, we can just make things simple and use html anchor tag.

Let's make this much simpler. If you're partial is not very big, just load it in on page load and give it style display:none.

<a href="javascript:void(0)" class="toggleLink">Link to my partial</a>

<div id="toggle_div" style="display:none">     <!-- using external stylesheets of course -->
   <%= render partial => "your_partial" %>
</div>

This way, the div will be hidden and no one can see it until they click on the link which will trigger the toggle action.

Then, (if you're using jQuery *****)

<script type="text/javascript">
   $(function(){
       $('.toggleLink').click(function(){
           $('#toggle_div').toggle();
       });
   });

   // notice the hash(#) and dot(.) before the elements? A hash represents an HTML ID and a 
   // dot represents an HTML class. I made the link have a class, and the toggle_div an ID 
   // but you may use whatever you'd like, just make sure if you're referencing an ID that you put
   // a hash(#) before it and if you're referencing a class, make sure you put a dot(.) before it.


   // this javascript should also be in your application.js, or some other JS file. The whole reason link_to_remote and 
   // those other "remote" tags were deprecated is to maintain unobtrusive javascript (take the JS out of the views).
   // this makes for cleaner, separated, more modular code.

</script>

And that's it!

If you want to do this ajax (I'd recommend doing it without ajax so long as the partial is small and you're only doing this once or twice on the page) you can use jQuery ajax methods. $.get comes to mind.

Also, if this isn't working, it's probably cause you don't have jQuery setup properly in your app, or it's conflicting with other libraries. I wrote a post on this yesterday, it's comment #8 on this page

Last edited by RailsRhino (2010-11-21 17:35:55)

- Ben