How to use ajax send data to controller in ruby on rails

Question

i am new developer in ROR.i use ajax with event change to send data from select_tag in show.html.erb into controller in def show ... end . i try to send data but my script not work.below is my script :

<script type="text/javascript">
    $('#cbo').change(function() {
       $.ajax({
        url: "/product_details/show",
        type: "POST",
        data: {"cbo_id" : $('#cbo').val()},
        dataType: "html",
        success: function(data) {
          alert('successfully');
        }
      });
    });
</script>

in product_details/show.html.erb

<%= form_tag(product_detail_path, :method => "post") do %>
  <%= select_tag "categories", options_from_collection_for_select(Category.all, :id,     :category_name),:id => 'cbo' %>
<% end %>

def show
  @getcbo = params[:cbo_id]
end

I think maybe wrong about url: "/product_details/show" .So how can i use url for send data to def show ... end in controller? .please help me !

Answer 1

Lots of things you need to adjust

---

MVC

Firstly, let me explain how ajax calls should work in Rails

Because Rails is based around the MVC (model view controller) programming pattern - you need to build your application around this. The problem for many newbie developers is that it's a little tricky to get your head around this - something which can be learnt relatively simply:

As you can see, MVC basically puts the "controller" at the center of the party. You must appreciate that in an MVC app, your requests don't go to the "view" first (as many people think) - they go to the controller, which builds the relevant data from the model, then rendering the view for you

So whenever you send a request to your MVC application, you need to remember to base it around your controller actions (not your views)

--

Ajax

I don't know how much experience you have with ajax (Asynchronous Javascript and XML), but in case you don't have much, let me explain.

Ajax is basically just a way to create "pseudo requests" in your browser. By "pseudo request", I mean that it will essentially send another request out of the typical flow of your "normal" application:

Because HTTP is "stateless" (IE it doesn't persist any settings / "state"), there are no ways to provide "real time" connectivity without something like web sockets.

Ajax provides you with the ability to send & receive data after your typical load process has completed, making it appear that you're receiving data in "real time". In reality, you're just sending a pseudo request to your app (always remember that Ajax isn't magic)

---

Code

Your code needs to change in several places

--

Firstly, you need to make your javascript unobtrusive (IE remove it from your views & place into your asset piepline)

#app/assets/javascripts/application.js
$(document).on("change", "#cbo", function() {
   $.ajax({
   url: "/product_details/show",
   type: "POST",
   data: {"cbo_id" : $(this).val()},
   dataType: "json",
   success: function(data) {
       alert('successfully');
     }
   });
});

#app/controllers/product_details_controller.rb
Class ProductDetailsController < ApplicationController
   respond_to :js, :json, :html

   def show
      @product = Product.find params[:id]
      respond_with @product
   end
end

This will give you the ability to receive back the product JSON object that you've set in the controller, a very basic example.

If you give me some more information about what you'd like to achieve, I'll certainly give you a more refined solution; hopefully the above code demonstrates how the MVC principle works etc