如何在控制器导轨中显示collection_select中的选项

Question

I have a scenario where upon selecting a designation , benefits will load in a drop down according to that designation . I have written an ajax call for this.

HTML:

<label>Designations</label>
<%= f.association :designation, input_html: { id: 'designation_select'},label_html: { class: 'form-control-plaintext' } %>

<label>Benefits</label>
<%= f.collection_select :benefit_ids, Benefit.all,:id, :name, {}, { id: 'benefit_select',multiple: 'multiple', :class => 'form-control multiselect-all',:include_blank => "Select Benefit" } %>

AJAX call:

<script type="text/javascript">
  document.addEventListener("turbolinks:load", function() {

    $('#designation_select').change(function() {
      debugger
      id = $('#designation_select')[0].value;
      $.ajax({
          type: 'GET',
          dataType: 'html',
          data: {designation_id: id},
          url: '/benefits/benefit_by_designation',
          success: function(result) {
            debugger
            var el, length, options, parser, results, x;
            $('#benefit_select').empty();
            $('#benefit_select').prepend('<option value=\'\'> Select Benefit </option>');
            parser = new DOMParser;
            el = parser.parseFromString(result, 'text/html');
            options = el.getElementsByTagName('option');
            length = options.length;
            x = 0;
            results = [];
            while (x < length) {
              $('#designation_select')[0].appendChild(options[0]);
              results.push(x++);
            }
            return results;
          }
        });
    });
});
</script>

Method in Controller :

  def benefit_by_designation
    benefits = Benefit.where('designation_id = ?', params[:designation_id])
    render html: view_context.options_from_collection_for_select(benefits, :id, :name, {include_blank: 'Select Benefit'})
  end

The code is running perfectly fine uptil the benefits = Benefit.where.. query in controller, but the render html: is not working as I wished it to. How to display that benefits list in the dropdown?

EDIT: I had accidentaly set the datatype in ajax call as json but I have now set it to html . Now, the success case of ajax call is being hit but still no results displayed.

Answer 1

try

def benefit_by_designation
 benefits = Benefit.where('designation_id = ?', params[:designation_id])
 render json: {:benefits => benefits }
end

change your ajax success as

success: function(result) {
         var options='';
          options += '<option value=\'\'> Select Benefit </option>';
          if(result.benefits)
            $.each(result.benefits,function(key, val){
              options += '<option value="'+val['id']+'">'+val['name']+'</option>';
            });
          var option_set = $('#benefit_select').html(options);
          option_set.trigger('change');
        }

hope this will help..