繁体   English   中英

jQuery,Rails,填充选择框

[英]jQuery, Rails, populating select box

我在填充选择框时遇到问题,具体取决于单击了具有给定category_id的哪个按钮。 当我单击其他按钮时,下拉列表中的数据正确,但格式错误。 它不是写为下拉列表,而是像数组“ [nam1,name2,....]”一样全部写在一行中,并且除了下拉列表之外,没有其他选项(如果在ajax成功函数中,我将data [i]代替数据,那么我会在一个巨大的选择中获得每个字母,因此效果不佳)。 多谢您的协助。

控制器:

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>'));
        });
      }
    });
  });
});

视图:

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

您的代码中存在许多问题:

  1. 您只返回每个标签的name ,但也需要它们的id参数。

  2. 您的dataType设置为script ,但是您返回JSON。

  3. 您需要遍历所接收的数据,而不是遍历页面上已存在的options

因此,要解决:

1)将您的控制器代码更改为此:

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)将您的请求中的dataType更改为json

jQuery.ajax文档说它将正确处理响应:

“ json”:将响应评估为JSON并返回一个JavaScript对象。

3)将您的success处理程序更改为此:

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>');
  };
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM