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?

Can you explain the calculation part a little more. If your "calculation" is only to manipulate the view items then you could do it with jQuery only, but if it requires some rails code execution then ajax is an alternative here. — vee
– vee, Commented Jan 2, 2014 at 6:58
okay, but how can I get the selected semester id value using jquery? — asdfkjasdfjk
– asdfkjasdfjk, Commented Jan 2, 2014 at 10:29

Richard Peck · Accepted Answer · 2014-01-02 10:43:00Z

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

Collectives™ on Stack Overflow

Jquery on selected option values in rails app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related