Show/Hide div based on attribute value(checkbox value)

Question

Is there any helper method available which shows/hides specified div based on the value of a model attribute?

Here is the partial where I want to show div that wraps openid_domain_name text field if openid_enabled is true and hide otherwise while editing record.

<%= form_for @application do |f| %>
    <%= render "shared/error_messages", target: @application %>
    <p>
      <%= f.label :name %>
      <%= f.text_field :name %>
    </p>
    <p>
      <%= f.label :description %>
      <%= f.text_field :description %>
    </p>   
    <p>
      <%= f.check_box :openid_enabled %>
      <%= f.label 'openid', 'OpenID' %>
      <div id="application_openid_domain" style="display: none;">
        <%= f.label :openid_domain_name %>
        <%= f.text_field :openid_domain_name %>
      </div>
    </p>
    <p><%= f.submit class: "btn btn-primary" %></p>
<% end %>

Here is the javascript that shows/hides the div when user checks/unchecks the check box.

<script type="text/javascript">
     $(function() {
        $(':checkbox').click(function () {
          if ($(this).is(':checked'))
            $("#application_openid_domain").show();
          else
            $("#application_openid_domain").hide();            
        });
    });
</script>

EDITED Generated HTML Source:

<form accept-charset="UTF-8" action="/applications" class="new_application" id="new_application" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Cq2rYF1qkjnsobimMTAUvle9Hi82LwdvghcVWRtC/I0=" /></div>
  <p>
    <label for="application_name">Name</label>
    <input id="application_name" name="application[name]" size="30" type="text" />
  </p>
  <p>
    <label for="application_description">Description</label>
    <input id="application_description" name="application[description]" size="30" type="text" />
  </p>
  <p>
    <input name="application[openid_enabled]" type="hidden" value="0" /><input id="application_openid_enabled" name="application[openid_enabled]" type="checkbox" value="1" />
    <label for="application_openid">OpenID</label>
    <div id="application_openid_domain" style="display: none;">
      <label for="application_openid_domain_name">Openid domain name</label>
      <input id="application_openid_domain_name" name="application[openid_domain_name]" size="30" type="text" />
    </div>
  </p>
  <p><input class="btn btn-primary" name="commit" type="submit" value="Create Application" /></p>
</form>

<script type="text/javascript">
     $(function() {
        $(':checkbox').click(function () {
          if ($(this).is(':checked'))
            $("#application_openid_domain").show();
          else
            $("#application_openid_domain").hide();            
        });
    });
</script>

Could I ask you to post the rendered (or a sample of the rendered) HTML that's seen by your browser? The server-side script is entirely irrelevant to your question and simply serves to make answering more difficult. — David Thomas, Aug 16 '12 at 12:01
Is it that you want ? http://jsfiddle.net/charlesjourdan/hK2dJ/ — Charles Jourdan, Aug 16 '12 at 12:20
@CharlesJourdan Client side is fine. I want to achive it from server side. — Amit Patel, Aug 16 '12 at 12:26
In fact you want a checkbox which is not affected by the refresh. — Charles Jourdan, Aug 16 '12 at 12:39

score 3 · Answer 1 · answered Aug 16 '12 at 12:08

3

You can use jQuery.toggle() function.

HTML:

<div id="div">123</div>
<input type="checkbox" vlalue="show-hide" checked="checked" id="box">

JavaScript:

$('#box').change(function() {
    $('#div').toggle(this.checked);
});

DEMO

answered Aug 16 '12 at 12:08

Eugene Naydenov

7,165
2
25
43

This looks more elegant but I want to show hide div before the rails server returns html. – Amit Patel Aug 16 '12 at 12:29
1

If any logic can be performed on client and it's safe, than it's better to perform it there to offload the server (save such resources as memory, processing time and sometimes network bandwidth). The concept is each of 10 clients can do safe 1x work for itself instead of make server doing 10x work (for each of 10 clients). It's why we can see so much client-side MVC frameworks in these latter days. – Eugene Naydenov Sep 21 '12 at 22:21

score 0 · Accepted Answer · answered Aug 16 '12 at 12:33

I have written custom helper to do the same. Please suggest if it is correct solution or not.

app/helper/application_helper.rb

def show_hide(show)
  show ? 'block' : 'none'
end

app/views/applications/_form.html.erb

<div id="application_openid_domain" style="display: <%= show_hide(@application.openid_enabled?)%>;">
  <%= f.label :openid_domain_name %>
  <%= f.text_field :openid_domain_name %>
</div>

Show/Hide div based on attribute value(checkbox value)

2 Answers2