选择二＆QUOT;无限滚动与远程数据＆QUOT; - 回调不触发 [英] Select2 "Infinite Scroll with Remote Data" - Callback not firing

问题描述

在对这一选择二项目页面的例子中，我试图拉更多的记录，当用户滚动到结果集的底部。

Following the example on the Select2 project page, I am attempting to pull more records when the user scrolls to the bottom of the result set.

<script>
  $(document).ready(function() {
    $('#style_full_name').select2({
        placeholder: "Please type in the make and model",
        minimumInputLength: 3,
        ajax: {
          url: "/list_styles",
          dataType: 'json',
          quietMillis: 100,
          data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page, // page number
            };
          },
          results: function (data, page) {
            var more = (page * 10) < data.total; // whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return {results: data.styles, more: more};
          }
        },
        formatResult: styleFormatResult, // omitted for brevity, see the source of this page
        dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
        escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
    });
    function styleFormatResult(style) {
      var markup = "<table class='style-result'><tr>";
      if (style.dimage_url !== undefined) {
          markup += "<td class='style-image'><img src='" + style.dimage_url + "'/></td>";
      }
      markup += "<td class='style-info'><div class='style-title'>" + style.full_name + "</div>";
      //if (movie.critics_consensus !== undefined) {
      //   markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
      //}
      //else if (movie.synopsis !== undefined) {
      //    markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
      //}
      markup += "</td></tr></table>"
      return markup;
    }
  });
</script>

在测试上选择二的页面烂番茄API示例和跟踪网络小组在Chrome控制台我可以看到，达到滚动列表的底部，当一个回调被触发。这不是发生在我滚动到滚动列表的底部在我自己的用例以上。

While testing the Rotten Tomatoes API example on Select2's page and tracking the network panel in the Chrome console I can see that a callback is fired when reaching the bottom of the scroll list. This is not happening when I scroll to the bottom of the scroll list in my own use case above.

推荐答案

周围挖了一会儿后，我意识到这个问题是总是不是我json的响应，从而 VAR更多=（页部分* 10）＆其中; data.total 被评估为false。下面是我的风格控制器（回报率），使无限滚动工作所需的code：

After digging around for a bit I realized the problem was "total" was not part of my json response so var more = (page * 10) < data.total was evaluating to false. Here is the code from my Styles controller (RoR) required to make the infinite scroll work:

  def list_styles 
    #sunspot solr query
    @styles = Style.search { fulltext params[:q]; paginate :page => params[:page], :per_page => params[:page_limit] }

    #Build Json String
    @styles = "{\"total\":#{@styles.total}, \"styles\":#{@styles.results.to_json(:only=>[:id, :full_name], :methods => [:dimage_url, :dimage_url_medium])}}"

    #Render Json Response
    respond_to do |format|
      format.json {render :json => @styles }
    end
  end

这篇关于选择二＆QUOT;无限滚动与远程数据＆QUOT; - 回调不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！