Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggling <div> Visibility in a Rails App

    I'm embarrassed to say that I have not used Javascript in quite a while, but now have to re-familiarize myself with it as I'm learning Ruby and Rails concurrently.

    Anyway, here's the code I'm working with:

    In application.js:
    Code:
    function toggle_visible(obj) {
    	var el = document.getElementById(obj);
    	if ( el.style.display != 'none' ) {
    		el.style.display = 'none';
    	}
    	else {
    		el.style.display = '';
    	}
    }
    In the view:
    Code:
    <div id="short_desc_<%= job.id %>">
      <%= truncate(job.description, 200)  %>
    </div>
    <div id="long_desc_<%= job.id %>" style="display:none;">
       <%= job.description %>
    </div>
    <%= link_to_function("Expand", "toggle_visible()") %>
    This generates an error in Firebug: "el has no properties - toggle_visible(undefined)"

    What is it I'm supposed to pass in this situation (since I'm changing the state of two divs)?

    Any help is greatly appreciated.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I don't know anything about ruby(?), but if the following line is producing your onclick handler call,
    Code:
    <&#37;= link_to_function("Expand", "toggle_visible()") %>
    then you may pass some value in the call to match the definition
    Code:
    function toggle_visible(obj){
    var el = document.getElementById(obj);
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A co-worker provided this solution using Prototype (a javascript framework):

    Code:
    <td colspan="3">
       <div id="short_desc_<&#37;= job.id %>">
    	<%= truncate(job.description, 200) %>
    	<br />
    	<%= link_to_function("Expand", "$(this).up('td').childElements().invoke('toggle')") %>
       </div>
       <div id="long_desc_<%= job.id %>" style="display:none;">
    	<%= job.description %>
    	<br />
    	<%= link_to_function("Collapse", "$(this).up('td').childElements().invoke('toggle')") %>
       </div>
    </td>
    Since it only occurs in this file, it was decided to make it an inline call, rather than include it in the .js file that gets included/loaded with all the pages.
    Last edited by Race; 03-14-2008 at 07:53 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •