Показать/скрыть div на основе значения атрибута (значение флажка)

Есть ли какой-либо вспомогательный метод, который показывает/скрывает указанный div на основе значения атрибута модели?

Вот часть, где я хочу показать div, который оборачивает текстовое поле openid_domain_name, если openid_enabled равно true, и скрыть в противном случае при редактировании записи.

<%= 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 %>

Вот javascript, который показывает/скрывает div, когда пользователь устанавливает/снимает флажок.

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

ОТРЕДАКТИРОВАНО Сгенерированный источник HTML:

<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>

person Amit Patel    schedule 16.08.2012    source источник
comment
Могу я попросить вас опубликовать отрендеренный (или образец отрендеренного) HTML, который видит ваш браузер? Сценарий на стороне сервера совершенно не имеет отношения к вашему вопросу и просто усложняет ответ.   -  person David says reinstate Monica    schedule 16.08.2012
comment
Добавлен сгенерированный HTML в вопрос   -  person Amit Patel    schedule 16.08.2012
comment
Это то, что вы хотите? jsfiddle.net/charlesjourdan/hK2dJ   -  person Charles Jourdan    schedule 16.08.2012
comment
@CharlesJourdan Клиентская сторона в порядке. Я хочу добиться этого со стороны сервера.   -  person Amit Patel    schedule 16.08.2012
comment
На самом деле вам нужен флажок, на который не влияет обновление.   -  person Charles Jourdan    schedule 16.08.2012


Ответы (2)


Вы можете использовать функцию jQuery.toggle().

HTML:

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

JavaScript:

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

ДЕМО

person Eugene Naydenov    schedule 16.08.2012
comment
Это выглядит более элегантно, но я хочу показать скрытый div до того, как сервер rails вернет html. - person Amit Patel; 16.08.2012
comment
Если какую-либо логику можно выполнить на клиенте и это безопасно, то лучше выполнять ее там, чтобы разгрузить сервер (сохранить такие ресурсы, как память, время обработки, а иногда и пропускную способность сети). Идея заключается в том, что каждый из 10 клиентов может безопасно выполнять 1x работу для себя вместо того, чтобы заставлять сервер выполнять 10x работу (для каждого из 10 клиентов). Вот почему в последнее время мы видим так много фреймворков MVC на стороне клиента. - person Eugene Naydenov; 22.09.2012

Я написал собственный помощник, чтобы сделать то же самое. Подскажите пожалуйста правильное решение или нет.

app/helper/application_helper.rb

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

приложение/представления/приложения/_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>
person Amit Patel    schedule 16.08.2012