javascript - How to show/hide fields on modal in Ruby on Rails? -
i writing application using rails 4.1 , ruby 2.1.2. has following show.html.erb view 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" %> <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 |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 user clicks new contact button, modal displayed using following form:
<%= form_for(@contact, url: assignment_contacts_path(@assignment), remote: true) |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 >>", "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 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, , :other fields on modal hidden css using display:none. but, based on option chosen in :notes select element, app needs display 1 of these fields when corresponding option value selected.
the way in rails know of jquery or coffeescript.
but, i'm not sure how write jquery/coffeescript this. , importantly, since form on modal, should jquery or coffeescript written? i've tried add simple alert in app/assets/javascript/contacts.js.coffee, doesn't triggered display. putting in wrong place?
please share code think work , tell me should placed.
edit: lanny got following jquery working in javascript console in 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 >>") { $("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 open dialog modal, paste above console , press run works perfectly. but, still doesn't run in application. i've tried put in application.js , in contact.js, neither 1 works. @ point, since code works in console, suspect might either needs run load code browser, or else interfering. running turbolinks right now, don't think necessary application.
can please me rest of way showing needs put , how call it, or assisting me in troubleshooting interfering?
thanks
let's walk through this...
i'm going implement rule: if user selects, '404' notes select, make 'redirect_url_change' input appear.
i know exact logic might different. mixing-and-matching jquery selectors can rest of 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 there debugging. js can fail in silent ways , it's hard determine why events aren't firing. use alert() highlight things happening, , aren't. ymmv.
this script doesn't explicitly have go in application.js, should go .js file in javascripts folder rails compiles app's javascript.
some references:
Comments
Post a Comment