How to show/hide fields on modal in Ruby on Rails?

Question

I am writing an application using Rails 4.1 and Ruby 2.1.2. It has the following show.html.erb view for an Assignment Model:

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

When a user clicks the New Contact button, a modal is displayed using the following form:

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

The :redirect_url_change, :contact_form_only, :irrelevant, and :other fields on the modal are hidden by css using display:none. But, based on the option chosen in the :notes select element, the app needs to display one of these fields when a corresponding option with that value is selected.

The only way to do this in Rails that I know of is with jQuery or Coffeescript.

But, I'm not sure how to write the jQuery/Coffeescript to do this. And just as importantly, since this form is on a modal, where should this jQuery or Coffeescript be written? I've tried to just add a simple alert in the app/assets/javascript/contacts.js.coffee, but that doesn't get triggered to display. Am I putting this in the wrong place?

Please share some code you think would work for this and tell me where it should be placed.

EDIT: Thanks to Lanny I got the following jQuery working in the javascript console in the browser:

$("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();
  }
})

When I open up the dialog modal, paste the above into the console and then press Run it works perfectly. But, it still doesn't run in the application. I've tried to put it in the application.js and also in the contact.js, but neither one works. At this point, since the code works in the console, I suspect it might be either something needs to be run to load the code into the browser, or else something is interfering. I am running Turbolinks right now, but I don't think it is necessary for the application.

Can someone please help me get the rest of the way by showing where this needs to be put and how to call it, or assisting me in troubleshooting what is interfering?

Thanks

Lanny Bose · Answer 1 · 2015-10-28T23:12:25.057

0

Let's walk through this...

I'm going to implement this rule: If a user selects, say '404' from the Notes select, make the 'redirect_url_change' input appear.

I know your exact logic might be different. Hopefully mixing-and-matching jQuery selectors can get you the rest of the way.

Using 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");
    }
  });
});

One line up there is for debugging. Sometimes JS can fail in somewhat silent ways and it's hard to determine why events aren't firing. I use alert() to help highlight which things are happening, and which aren't. YMMV.

This script doesn't explicitly have to go in application.js, but it should go into a .js file in your javascripts folder so Rails compiles it into your app's JavaScript.

Some references:

edited Oct 28 '15 at 23:12

answered Oct 27 '15 at 18:23

Lanny Bose

1,811
1
11
16

Lanny, thanks for the code, but it doesn't work. I pasted it directly into my application.js exactly the way you wrote it. But, when I change the value of the notes field I don't get the alert. I noticed that the value in the select was "404 Not Found", so I changed the expression to use that string, but still no joy. Is it possible that something is interfering with this? – Doug366 Oct 28 '15 at 17:28
Lanny, it may be helpful to note when I paste your code into the console on Firefox and change the comparison expression to "404 Not Found" and then change the value in the Notes field I get the alert and it properly shows the redirect_url_change field. So, it looks like the code is right, it just seems like there is a disconnect somewhere that is preventing this for running when I put it in the application.js and run it that way. Any help in debugging this would be appreciated. – Doug366 Oct 28 '15 at 17:57
Ahh... my bad. I bet I missed `$(document).ready();`. You need to wait for the page to load before attaching the event handlers. Editing above... – Lanny Bose Oct 28 '15 at 21:52
And I think I was missing a semi-colon after the last parenthesis as well. Give that a shot. Let me know. – Lanny Bose Oct 28 '15 at 21:54
Nope, still doesn't work! Not even getting the alert, so it seems like the javascript isn't even being triggered. – Doug366 Oct 28 '15 at 22:25
That's interesting. Are you getting any errors in your javascript console on page load? – Lanny Bose Oct 28 '15 at 22:25
Also, are you using Turbolinks? – Lanny Bose Oct 28 '15 at 22:25
No, the only thing I get in the javascript console is $("select[name='contact[notes]']").change(functio...extarea[name='contact[other]']").hide(); } }); Object[select#contact_irrelevant] – Doug366 Oct 28 '15 at 23:09
Ahh, using Turbolinks means you cannot always rely on `$(document).ready`. Let's try on page:load... this (see edit) – Lanny Bose Oct 28 '15 at 23:11
I didn't do anything to enable Turbolink, but I think it gets installed by default. //= require turbolinks is in my application.js and I see Turbolinks listed in the watch section of the Script tab in Firefly so I think it is being used. – Doug366 Oct 28 '15 at 23:13
I also tried following this answer to handle $(document).ready issue: http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links, but it still didn't help. – Doug366 Oct 28 '15 at 23:15
Revised to use the first line of your edit, but still don't get an alert nor do fields display – Doug366 Oct 28 '15 at 23:20
Tell me more about the link to show the modal. Is the HTML for the modal isn't part of `show.html.erb`? Is it part of another template? – Lanny Bose Oct 28 '15 at 23:22
Sorry. Another idea. You could put it in a ` – Lanny Bose Oct 28 '15 at 23:24
I disabled Turbolinks and still doesn't work. I'll try adding the script tag and see what happens. – Doug366 Oct 28 '15 at 23:32
Added a script tag below the
and added your above code. Still doesn't work. No alert is even displayed.
– Doug366 Oct 28 '15 at 23:47
If you're in the script tag, remove the `on page:load` bit. Start with just `$("select`... – Lanny Bose Oct 28 '15 at 23:49
The HTML for the modal is part of _form.html.erb partial rendered from new.html.erb under the contacts folder in views – Doug366 Oct 28 '15 at 23:50
Still no help when removing the on page:load – Doug366 Oct 28 '15 at 23:54
Don't know what to tell you, bud. If copy-pasting the function directly into console works, the JS is ok. I'm out of ways to debug why your JS isn't triggering on page load. Maybe someone else can help. Sorry. – Lanny Bose Oct 28 '15 at 23:55
Well thanks so much for all your time looking at it. I'll sleep on it and see if something comes to me tomorrow. – Doug366 Oct 29 '15 at 00:02

How to show/hide fields on modal in Ruby on Rails?

1 Answers1