1

Here's what I'm attempting to do. On my "Create Assignment" , I want the "Link" question to ONLY be showed if the dropdown on assignment_type has "Video" selected.

<%= render 'shared/errors', obj: @assignment %>


<%= form_for(@assignment, :html => {class: "form-horizontal", role: "form"}) do  |f| %>
    <div class="form-group">
        <div class = "xtrapadding">
            <%=f.label "Select Unit(s) for Assignment"%>
            <%= f.collection_select(:unit_ids, Unit.all, :id, :name, {placeholder: "Units"}, {multiple: true} )%>

        </div>
          <div class="form-group">
            <%= f.label :assignment_type %>
            <%= f.select :assignment_type, options_for_select(Assignment.options, params[:type]), {}, required: true, class: 'form-control' %>
          </div>
        <div>
              <%= f.text_field :name, class:"form-control", placeholder: "Title of Assignment", autofocus: true %> 
        </div>
        <div class="field">
            <b><%= f.label :description %></b>
            <%= f.rich_text_area :description %>
        </div>
        <div>
            <%= f.text_field :duedate, class: "datepicker", placeholder: "Due Date"%>
        </div>
        <div>
              <%= f.text_field :link, class:"form-control", placeholder: "Insert video link", autofocus: true %> 
        </div>
        <div class="form-group" id="submitbutton">
            <div align = "center">
                <%= f.submit  class: "btn waves-effect waves-light" %>
            </div>
        </div>
    </div>
<%end%>

It's that last question I want to show or hide based off of the link. I want it to default to hidden, but to be visible when the dropdown is selected with a certain value. I'm fairly sure I need to use Ajax, but other than that I'm not quite sure where to start. Thanks! By the way, I'm using Webpacker and Rails 6.

Chase
  • 77
  • 1
  • 11

1 Answers1

2

When you want to show or hide something on a page you do use Javascript. However, Ajax would only come into the picture if you wanted to asynchronously fetch data to the server then drop that query's result into your web page without re-rendering the entire page.

In your example, once the page loads you have everything you need already on the page, so no need for Ajax. There are a few ways to solve your problem, but the td;dr version is 'Use Javascript'.

It will probably be something like this:

  1. Put an event listener on your drop down menu: When a selection is made by the user it will trigger a few different javascript events. You need to define a 'listener' that will call a function (that you will write) when that event fires. In this case, you could use something like this object.addEventListener("select", myScript). That would go on each item in the drop down, and then the myScript function would check the value or id of the selected item. If it is not 'Video', exit the function. If it IS 'Video', go to step 2...
  2. Change some attribute of the hidden element to become visible. If you are hiding it with a class you could remove that class. Or, you could leverage the HTML 'visible' attribute. Now your item is visible. If someone changes their selection again, go to step 3...
  3. Same as before, an event listener fires, but now we are hiding. It could be the same function that hid your element if you want to put conditional logic in there, or you can use a different lister with a different function. That will then hide the element using whatever visibility strategy you have chosen for your page.

This is a common point of confusion for people learning Rails. Rails does a lot, but Javascript still runs your DOM. It's important to understand where the line is between the two. I posted an answer to a similar question here, check it out if you want more context.

Also you might have to look into a way to add / remove the value of the hidden field from your form submission. Follow the link to my other answer and there is a note about that in there.

sammms
  • 668
  • 8
  • 24