Jquery on selected option values in rails app

Question

I have this dropdown list

  <div class="field">
    <%= f.collection_select :semester_id, Semester.all, :id, :name %><br />
  </div>

This create id registration_semester_id

When someone select an option I have to take that value do some calculation with jquery like below

<script type="text/javascript">    
    $('document').ready(function(){
        $("#registration_semester_id").click(function(){


// here I have to do something like this
            /*
            @subject.each do |subject|

            if subject.semester_id == value

            <%= check_box_tag "checkboxs[]", subject.semester_id %>
            <%= subject.name %>

            end


             */
            //alert("working");

        });

    });

</script>

I have a table subjects and it has two column name and semester_id. Please let me know how can I do this?

Answer 1

Considering you want to use table data, I'd recommend using Ajax, like this:

#app/assets/javascripts/your_js.js
$('document').ready(function(){
    $(document).on("change", "#registration_semester_id", function(){
        $.ajax({
            url: 'your_endpoint',
            data: $(this).val(),
            error: function(data) {
                 alert("There was an error, sorry!");
            }
        });
    });
});

#config/routes.rb
resources :your_controller do
    get your_endpoint", to: "contorller#action"
end

#app/controllers/your_controller.rb
def your_endpoint
    @subject = Subject.where(#your_query_here)

    respond_to do |format|
        format.js #-> loads app/views/your_controller/your_endpoint.js.erb
    end
end

#app/views/your_controller/your_endpoint.js.erb
   <% @subjects.each do |subject| %>
        <% checkbox = [] %>
        <% if subject.semester_id == value %>
            <% checkbox << check_box_tag "checkboxs[]", subject.semester_id %>
        <% end %>

        $(".field").append(<%=j checkbox %>);
   <% end %>

This will append the checkboxes only - we can refactor if required! And of course, we can improve this to get it working!

---

Ajax

The reason you need Ajax is because JS is client-side only (runs in the browser), and Rails is server-side (works with the database). Rails cannot be used directly with Javascript, because it only comes to life when you send an HTTP request (which is why you'd need Ajax)

As mentioned in the comments, if you wanted to do a calculation on the client-side, you'd be able to use JS entirely; you can't mix Rails & JS without a bridge to the server

The code I created basically moves your Rails loop & conditions to a controller action & puts it into a JS file which is called when your Ajax fires. This will allow you to call the data you require each time you change your select box's value