Select2无法加载远程数据

我在select2中遇到了一些问题。我尝试通过以下API文档加载远程数据，但我仍然得到一个加载指示器，没有错误，但没有显示数据。Select2无法加载远程数据

下面是一些代码：https://gist.github.com/Fire-Dragon-DoL/5993136

的Javascript：

(function() { 
    var $; 

    $ = jQuery; 

    $(function() { 
    $('a.submit-link').on('click', function(ev) { 
     ev.preventDefault(); 
     $(this).closest('form').submit(); 
    }); 
    $('.spinner-float').spinner({ 
     step: 0.01, 
     numberFormat: 'n', 
     min: 0 
    }); 
    $('.spinner').spinner({ 
     min: 0 
    }); 
    $('.select2-cities').select2({ 
     width: 200, 
     minimumInputLength: 1, 
     dropdownCssClass: 'bigdrop', 
     loadMorePadding: 300, 
     formatResult: function(obj, container, query, escapeMarkup) { 
     console.log("formatResult"); 
     return obj.name; 
     }, 
     formatSelection: function(obj, container) { 
     console.log("formatSelection"); 
     return obj.name; 
     }, 
     initSelection: function(element, callback) { 
     var id; 

     console.log("initSelection"); 
     id = $(element).val(); 
     if ((id != null) && id !== '') { 
      $.ajax(gon.cities_path + '/' + id + '.json', { 
      dataType: 'jsonp' 
      }).done(function(data) { 
      console.log("initSelection callback"); 
      console.log(data); 
      callback(data); 
      }); 
     } 
     }, 
     ajax: { 
     url: gon.cities_path + '.json', 
     dataType: 'jsonp', 
     data: function(term, page) { 
      return { 
      query: term, 
      page: page - 1 
      }; 
     }, 
     results: function(data, page) { 
      console.log("results"); 
      console.log(data); 
      return data; 
     } 
     } 
    }); 
    }); 

}).call(this);

这里是JSON响应：

{ 
"total": 8084, 
"results": [ 
{ 
"cap": 35031, 
"id": 8085, 
"name": "Abano Terme", 
"province": "PD", 
"state_id": 25 
}, 
{ 
"cap": 26834, 
"id": 8086, 
"name": "Abbadia Cerreto", 
"province": "LO", 
"state_id": 21 
} 
], 
"more": false 
}

和HTML的一部分（选择2显示正确，我不认为这是问题）：

<!-- ... --> 
<script type="text/javascript"> 
    //<![CDATA[ 
    window.gon = {};gon.cities_path="http://localhost:3000/cities"; 
    //]]> 
    </script> 
<!-- ... --> 
<input class="select2-cities" id="travel_diary_city_id" name="travel_diary[city_id]" type="hidden" value="13987" />

在主旨文件，你还可以找到的代码CoffeeScript的版本。我真的不明白的是console.log在任何情况下都不会被调用，所以基本上格式化函数和类似的东西都不会被调用。

更新1：解决了一些与JavaScript代码有关的问题，其中一些键在ajax对象内而不是构造函数中。

来源

2013-07-14 Fire-Dragon-DoL

看起来我正在使用JSONP而没有实现它的服务器端。将数据类型移至json修复了问题。

来源

2013-07-14 04:46:09

这只是解决了我的问题，谢谢！ – Moeri

Select2无法加载远程数据

回答

相关问题