show/hide div in Ruby on Rails form

Question

I'm desperate and frustrated about this : how can I show hide one or more div in my form (Ruby on Rails)?

I browsed the forum and tried all the following with no luck:

I tried this in my partial view _form.html.erb

    <div id="foo">foo</div>
    <a href="#" onclick="Element.toggle('foo'); return false;">toggle foo</a>

I tried

    <div id="foo">foo</div>
    <%= link_to_function('toggle foo', "Element.toggle('foo')") %>

I tried

    <div id="foo" class=foo_class>foo</div>
    <a href="#" onclick="$$('.foo_class').each(Element.toggle);">toggle foo</a>

I tried

    <a href="javascript:void(0);" onclick="showHide('foo');">toggle foo</a>

where showHide(elementId) is defined as follows

    <script language="javascript" type="text/javascript">
    function showHide(elementId) {
        if (document.getElementById) {
            var element = document.getElementById(elementId);
            if (element.style.visibility == 'hidden') {
                element.style.visibility = 'visible';
            } else if (element.style.visibility == 'visible') {
                element.style.visibility = 'hidden';
            }
        }
    }
    </script>

I also tried the same showHide function with display none/block instead of visibility hidden/visible

I have this line in the head section of my layouts/application.html.erb

    <%= javascript_include_tag :defaults %>

None of these solutions I found on the forum worked for me.

So, what am I missing here? why all the solution others proved to work still don;t work for me?

buddhabrot · Accepted Answer · 2011-12-12 09:07:48Z

3

If your element's visibility is "" (meaning not set, which is its default value), you won't do anything with showHide. Which is probably why that approach didn't work. There's also a difference between turning an object invisible (which will still take up space in your layout) or hiding it (which will make it not take up any space).

What does this do?:

$('foo').toggle();

or

$('foo').invoke('toggle');

Maybe you're using an old jQuery library.

answered Dec 12, 2011 at 9:07

buddhabrot

1,58610 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rh4games Over a year ago

Thanks for the feedback. I changed my div to this <div id="foo" style="display:none">foo</div> and it worked fine, but I wanted to use a button instead of a link so I changed it to <button onclick="showHideDiv('foo');">toggle foo</button> this makes the div appear but then immediately disappear because I think the button also does a submit and that refreshes the whole page with a display:none How can I disable the submit action of the button?

buddhabrot Over a year ago

Return false in the button's event handler

rh4games Over a year ago

I changed my function to element.style.display = 'block'; return false; and element.style.display = 'none'; return false; Options 1 through 3 below work fine but Option 4, which is my preferred, does not Option 1 : <a class="button" href="#" onclick="showHideDiv('foo');">toggle foo</a> Option 2 : <input class="button" value="toggle foo" onclick="showHideDiv('foo');"> Option 3 : <a href="javascript:void(0);" onclick="showHideDiv('foo');">toggle foo</a> Option 4 : <button onclick="showHideDiv('foo');">toggle foo</button>

rh4games · Accepted Answer · 2011-12-12 22:07:49Z

3

I solved my issue by using this

<input type=button value="toggle foo" onclick="showHideDiv('foo');">

Thanks all for your help.

answered Dec 12, 2011 at 22:07

rh4games

9722 gold badges15 silver badges38 bronze badges

Collectives™ on Stack Overflow

show/hide div in Ruby on Rails form

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related