【问题标题】:Loading JSON Tags into Select2 with AJAX使用 AJAX 将 JSON 标签加载到 Select2 中
【发布时间】:2013-09-16 19:31:54
【问题描述】:

好的,所以我使用下面的代码来获取标签列表并将其加载到 select2 框中。这些选项以["test1","test2"] 的形式返回,这应该是正确的格式,但我假设它们需要以某种方式循环处理

    //This part is meant to grab the options. I am using model ID 473 for testing

    $('#ticket_style_id').on("change", function(e) { 
      var tag_list = $.ajax({
        url: "/grab_options/<%= 473 %>",
        async: false
       }).responseText;

     //This part is meant to load the tag_list into a select2 box based on the 
     //selection above        

      $("#ticket_option_list").select2({
        tags: [ tag_list ]
      });
  })

有趣的是,如果我替换以下内容:

 $("#ticket_option_list").select2({
        tags: ["test1","test2"]
      });

...一切正常。

此控制器代码正在返回 JSON:

def grab_options
    style = Style.find(params[:id])
    respond_to do |format|
      format.js { render json: style.option_list.to_json }
    end
  end

【问题讨论】:

  • 您的响应是字符串还是 JSON 对象?如果它是 JSON 对象,您可能需要将 dataType: "json" 添加到您的 ajax 设置对象中,以确保它实际上被解释为 JSON。或者,您可以将回复的内容类型设置为application/json
  • 它应该是一个 JSON 对象。查看我的编辑
  • 当您使用console.log(tag_list) 时,tag_list 会记录什么?只是一个数组?
  • 顺便说一句,我强烈反对async: false 选项,尤其是对于自动完成框。对于连接速度较慢的任何用户来说,这都是一种痛苦。
  • 控制台日志 = ["test1","test2"]

标签: javascript ruby-on-rails json


【解决方案1】:

出于两个原因,我建议采用以下方法:

1) 它强制将响应解释为 JSON(因为 dataType: 'json'

2) 它使用成功回调而不是使用async: false

$('#ticket_style_id').on("change", function(e) { 
  var tag_list = $.ajax({
    url: "/grab_options/<%= 473 %>",
    dataType: 'json',
    success: function(response) {
      $("#ticket_option_list").select2({
        tags: response
      });    
    }
  });
});

编辑:

话虽如此,我相信Select2 有一个内置的 AJAX 方法,您可以在他们的tutorial 中看到。

【讨论】:

  • 我刚刚更新了代码以处理正确的响应内容。
猜你喜欢
  • 2023-03-13
  • 1970-01-01
  • 2017-06-25
  • 2014-05-01
  • 2013-12-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多