openSNP/snpr

<%= form_for(phenotype.user_phenotypes.new,:url => {:controller => :user_phenotypes, :action => :create,:js_modal => true}, :html => {:class => "form-horizontal"}) do |up| %>
  <%= up.text_field :variation, :id => "phenotype_field"+phenotype.id.to_s, class: "form-control modal__input-text" %>
  <%= up.hidden_field :phenotype_id, { value: phenotype.id } %>
  <p><b>Phenotype Description</b>:<br><%= phenotype.description %></p>
  <p>You can either enter your variation using the text-field (including auto-completion) above or just choose one of the already known variations below.</p>
  <% phenotype.known_phenotypes.each do |p| %>
  <div class="radio modal__radio">
    <label class="radio">
      <%= up.radio_button(:variation, p,) %> <%=p%>
    </label>
  </div>
  <% end %>
  <%= up.submit "Save", :class => "btn btn-default modal__save-button" %>
<% end %>

<% content_for id.to_sym do %>
  <h3 class="modal_title">What is your variation at phenotype <em><%=phenotype.characteristic%></em>?</h3>
<% end %>

<script type="text/javascript">
// hides the input-box when user has selected a radio-button
$(document).ready(function() {
        $('input[type=radio]').click(function() {
            $('<%="#phenotype_field"+phenotype.id.to_s%>').hide();
            $("label[for=user_phenotype_variation]").hide();
            });
});

// show the input-box when closing the modal
$('#<%=id%>').on('hidden.bs.modal', function (e) {
          $('<%="#phenotype_field"+phenotype.id.to_s%>').show();
          $("label[for=user_phenotype_variation]").show();
          $("#<%=id%>").find("input:radio").prop("checked", false).end()
           .buttonset("refresh");
});

// Autocomplete for variations in the input-box
$(function () {
    $('<%="#phenotype_field"+phenotype.id.to_s%>').autocomplete({
        source: <%=raw(phenotype.known_phenotypes.to_json)%>
    });
});

</script>