Question

我正在使用Rails 4.1和Ruby 2.1.2编写应用程序。它具有以下分配模型的show.html.erb视图：

<h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.source.url %></div></h1>
<%= link_to new_assignment_contact_path(@assignment), id: 'display_modal', class: "add-btn btn-big" do %>
<i class="i15"></i> Add Contact
<% end %>
<br />
<br />
<table>
  <thead>
    <tr>
        <th>Contact Email Address</th>
        <th>Contact Name</th>
        <th>Title</th>
        <th>Phone</th>
  <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <% @contacts.each do |contact| %>
        <tr>
            <td><%= contact.contact_email %></td>
            <td><%= contact.contact_name %></td>
            <td><%= contact.contact_title %></td>
            <td><%= contact.contact_phone_number %></td>
    <td><%= contact.notes %></td>
        </tr>   
    <% end %>
  </tbody>      
</table>
<br />
<%= link_to "Completed", change_status_assignment_path(@assignment, status: "Completed"), method: :patch, class: "action-btn" %>

当用户单击“新建联系人”按钮时，将使用以下格式显示模式：

    <%= form_for(@contact, url: assignment_contacts_path(@assignment), remote: true) do |f| %>
    <div class="cols">
  <div class="col">
    <div class="field">
      <%= f.email_field :contact_email, autofocus: true, placeholder: "Contact email" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_name, placeholder: "Contact Name" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_title, placeholder: "Contact Title", class: "ico-doc" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_phone_number, placeholder: "Contact Phone Number", class: "ico-phone" %>
    </div>
  </div>
  <div class="col">
    <div class="field">
      <%= f.text_field :contact_domain, placeholder: "Contact Domain", class: "ico-www" %>
    </div>
    <div class="field">
      <%= f.select :notes,  ["404 Not Found", "Page Not Loading", "Site Error", "Web Page Not Available", "Log In Required", "Privacy Error", "Blank Page",  "Redirect Url Change >>", "Contact Form Only >>", "Irrelevant >>"], { prompt: "Notes" }, { class: "ico-globe" }  %>
    </div>
    <div class = "field">
      <%= f.text_field :redirect_url_change, placeholder: "Enter Redirect URL" %>
    </div>
    <div class = "field">
      <%= f.text_field :contact_form_only, placeholder: "Enter Contact Form URL" %>
    </div>
    <div class = "field">
      <%= f.select :irrelevant, ["Foreign Site", "Lead Gen Site", "Job Listing", "Domain For Sale", "Forum", "FAQ", "Other >>"], { prompt: "Select Reason Irrelevant", style: 'display:none'} %>
    </div>
    <div class = "field">
      <%= f.text_field :other, placeholder: "Enter other reason" %>
    </div>
  </div>
    </div>

    <div class="actions">
        <%= f.submit "Submit", class: "action-btn" %>
    </div>          
<% end %>

：redirect_url_change，：contact_form_only，：不相关，以及：模式中的其他字段由css使用display：none隐藏。但是，根据：notes select元素中选择的选项，当选择具有该值的相应选项时，应用程序需要显示其中一个字段。

我知道Rails的唯一方法是使用jQuery或Coffeescript。

但是，我不确定如何编写jQuery / Coffeescript来执行此操作。同样重要的是，由于这个表单是一个模态，这个jQuery或Coffeescript应该写在哪里？我尝试在app / assets / javascript / contacts.js.coffee中添加一个简单的警报，但是没有触发显示。我把它放在错误的地方吗？

请分享一些您认为适用的代码，并告诉我应该放在哪里。

编辑：感谢Lanny我在浏览器的javascript控制台中使用了以下jQuery：

$("select[name='contact[notes]']").change(function () {
   if ($(this).val() == "Redirect Url Change >>") {
    $("input[name='contact[redirect_url_change]']").show();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
  else if ($(this).val() == "Contact Form Only >>") {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").show();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
  else if ($(this).val() == "Irrelevant >>") {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").show();
    $("input[name='contact[other]']").hide();
  }
    else {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
 })

$("select[name='contact[irrelevant]']").change(function () {
  if ($(this).val() == "Other >>") {
    $("textarea[name='contact[other]']").show();
  }
  else {
    $("textarea[name='contact[other]']").hide();
  }
})

当我打开对话框模式时，将上面的内容粘贴到控制台中，然后按“运行”它完美地运行。但是，它仍然没有在应用程序中运行。我已经尝试将它放在application.js和contact.js中，但两者都不起作用。此时，由于代码在控制台中工作，我怀疑可能需要运行某些东西才能将代码加载到浏览器中，否则会出现干扰。我现在正在运行Turbolinks，但我认为这对应用程序来说是不必要的。

有人可以通过展示需要放置的位置以及如何调用它来帮助我完成剩下的工作，或者协助我解决干扰问题吗？

由于

Answer 1

让我们来看看......

我将实施此规则：如果用户从Notes选择中选择“404”，则会显示“redirect_url_change”输入。

我知道你的确切逻辑可能会有所不同。希望混合和匹配的jQuery选择器可以让你完成其余的工作。

使用jQuery ...

<强>的application.js

$(document).on("page:load", function() {
  $("select[name='contact[notes]']").change(function () {
    alert("Howdy!");
    if ($(this).val() == "404") {
      $("input[name='contact[redirect_url_change]']").css("display", "block");
    }
  });
});

有一行用于调试。有时JS可能会以某种沉默的方式失败，并且很难确定事件未触发的原因。我使用alert()来帮助突出显示正在发生的事情，哪些事情没有发生。 YMMV。

此脚本不必显式地进入application.js，但它应该进入javascripts文件夹中的.js文件，以便Rails将其编译到应用程序的JavaScript中。

一些参考文献：

如何在Ruby on Rails中显示/隐藏模态上的字段？

1 个答案: