jQuery, Rails, populating select box

Question

I am having problems with populating a selectbox depending on which button with given category_id was clicked. I get the correct data on a dropdown when I click on a different button but it is in incorrect format. It is not written as a dropdown but all in one line like an array "[nam1, name2, ....]" and no other options in a dropdown besides that one (if in ajax success function I put data[i] instead of data then I get each letter in a one huge select so that does not work as well). I would appreciate your help.

Controller:

def update_names
  @categories = Category.all
  @category = Category.find params[:category_id]
  @labels = @category.category_labels.collect { |l| l.name }

  respond_to do |format|
    format.js { render json: @labels }
  end
end

jQuery:

 $(function() {
  $('.categories_btn').each(function(e){
  $(this).on("click", function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var category_id = $(this).attr("category_id");

    $.ajax('update_names', {
      type: 'GET',
      dataType: 'script',
      cache: true,
      data: {
        category_id: category_id
      },
      error: function(jqXHR, textStatus, errorThrown) {
        return console.log("AJAX Error: " + textStatus);
      },
      success: function(data, textStatus, jqXHR, json) {          
        $("select option").each(function(i, v) {
          $('#labels_name').html( $('<option value="'+ i +'">'+data +'</option>'));
        });
      }
    });
  });
});

View:

 = f.select :name, @labels.collect { |l| [l.name, l.id] }, id: 'names_select'

Answer 1

You have a number of problems in your code:

1. you are returning only name for each of your labels, but you need their id params too.

2. your dataType is set to script , but you return JSON.

3. you need to iterate over the data you are receiving, not over the options that are already on page.

So, to fixes:

1) Change your controller code to this:

def update_names
  @categories = Category.all
  @category = Category.find params[:category_id]
  @labels = @category.category_labels.map do |l| 
    { name: l.name, id: l.id } 
  end

  respond_to do |format|
    format.json { render json: @labels }
  end
end

2) Change dataType in your request to json .

jQuery.ajax documentation says that it will handle the response correctly:

"json": Evaluates the response as JSON and returns a JavaScript object.

3) Change your success handler to this:

success: function(data, textStatus, jqXHR, json) { 
  var parent_element = $("#names_select");
  parent_element.html("");
  data.forEach(function(v) {
    var id = v.id;
    var name = v.name;
    parent_element.append('<option value="' + id '">' + name + '</option>');
  };
}