ruby-on-railsrubyajax-request

Dynamic dropdown (select_tag) with Ruby on Rails


I've been trying to create 3 dynamic dropdown, wich the first change the content of the sencond and the second change the content of the thrid.

I haven't found an example for doing that, I found an example in which you send all the information to the client and there it is filtered, but it is not what I want. I want it to interact with the server every time the select has a change.

If somebody has a tutorial or could give a brief example, I would really appreciate that

Thanks


Solution

  • You need 3 things for it to work:

    1- Javascript on change event on your select:

    // This will monitor your select control and start the process after its content has changed
    $('select#my_select_control').change( select_has_changed(this) );
    

    2- Javascript Ajax controller function:

    // This will send the selected value to your Rails server
    function select_has_changed(obj)
    {
      // We get the selected value
      var value = $(obj).val();
    
      // It's a good idea here to verify the value.
      // For example if the value is empty we can empty the content 
      //   of the target select control and do not go through ajax
    
      // We make the ajax call to the rails controller
      $.ajax({url: '/path/to/controller/action', 
              data: {value: value},
              // We are requesting for json response, but you can use html if you like
              dataType: "json",
              // Get method, or other is you like, you just have to 
              //   define it accordingly in your routes
              method: 'get'
              // This is the function to call when ajax succeed
              success: function (data) { fill_up_form(data, obj) }
      });
    }
    
    // This is called when Ajax was successful , and it will 
    //   fill up your target select control
    function fill_up_form(data, obj)
    {
      content = ... // Here you loop through your json data to create
                    //   a set of OPTION tags
                    // Or if you used html as dataType, the rails server had it done
                    //   so you can inject directly in your select target control
      $('select#my_target_control').html(content);
    }
    

    3- Rails controller method

    # The action method that receive the ajax call
    #   you must have set-up your routes accordingly 
    def get_my_ajax_data
      # This fetches the data from the database
      # Note that we are using `params` with the same index as 
      #   we used in the `data` hash of the ajax call
      #   which, in my example is `value`
      records = Model.where(field: params[:value])
    
      # For a json request we return a collection of [id, text]
      #   that can be used to populate your target select control
      # As an alternative we could have render a template if
      #   we was requesting for html content
      render json: records.collect{ |r| {id: r.id, text: r.name} }
    end