Select2 infinite scroll stuck on first page

Hi everybody,

I have this problem using Select2 with AJAX-based loading, querying a controller action to get the paginated items. I suspect it is more a javascript issue rather than a Yii2 one, anyway everytime the query result is bigger than the items per page I have set, my Select2 load the items of the first page, display the message "Loading More Result" after scrolling down but never load the items of the second page. Inspecting with the browser I have noticed as the GET to retrieve the second page is never fired. Hope there might be somebody that have already experienced such situation. My code, for the view is:




$formatJs = <<< JS

var formatRepo = function (repo) {

    if (repo.loading) {

        return repo.name;

    }

var markup =

'<div class="row">' + 

    '<div class="col-sm-6">' +

        '<img src="/admin/attachments/file/download?id=' + repo.image_id + '" class="img-rounded" style="width:30px" />' +

        '<b style="margin-left:5px">' + repo.name + '</b>' + 

    '</div>' +

    '<div class="col-sm-2"><i class="glyphicon glyphicon-shopping-cart"></i> SKU: ' + repo.sku + '</div>' +

    '<div class="col-sm-2"><i class="glyphicon glyphicon-euro"></i> ' + repo.price + '</div>' +

    '<div class="col-sm-2"><i class="glyphicon glyphicon-barcode"></i> IVA: ' + repo.vat + '</div>' +

'</div>';

    return '<div style="overflow:hidden;">' + markup + '</div>';

};

var formatRepoSelection = function (repo) {

    return repo.name;

}

JS;


$this->registerJs($formatJs, View::POS_HEAD);


$resultsJs = <<< JS

function (data, params) {

    params.page = params.page || 1;

    var more = (params.page * 4) < data.total_count;

    return {

        results: data.items,

        pagination : {

          more: more

        }   

    };

}

JS;


....


<?=

$form->field($model, 'id_product')->widget(Select2::className(), [

    'id' => 'product_select',

    'options' => ['placeholder' => 'Digita il nome di un prodotto o il suo SKU ...'],

    'pluginOptions' => [

        'allowClear' => true,

        'minimumInputLength' => 1,

        'ajax' => [

            'url' => "/admin/product/js-retrieve",

            'dataType' => 'json',

            'delay' => 250,

            'data' => new JsExpression('function(params) { return {q: params.term, page: params.page}; }'),

            'processResults' => new JsExpression($resultsJs),

            'cache' => true

        ],

        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),

        'templateResult' => new JsExpression('formatRepo'),

        'templateSelection' => new JsExpression('formatRepoSelection'),

    ],

]);

?>


.....




The controller:




public function actionJsRetrieve($q) {

        if (\Yii::$app->request->isAjax) {

            \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

            return Product::productsQuery($q);

        }

        throw new \yii\web\BadRequestHttpException('Errore richiesta non valida');

    }



The model:




public static function productsQuery($q) {

        $query = Product::find()

             ->where(['product.is_deleted' => 0])

             ->andWhere('product.name  LIKE :q OR product.sku LIKE :q', [':q' => '%' . $q . '%']);

        $count = clone $query;

        $pages = new Pagination(['totalCount' => $count->count(), 'defaultPageSize' => 4]);

        $models = $query->offset($pages->offset)

              ->limit($pages->limit)

              ->all();

        $products_array = [];

        if (!empty($models)) {

              foreach ($models as $product) {

                     $filesArray = $product->files;

                     $products_array[] = [

                            'id' => $product->id,

                            'name' => $product->name,

                            'image_id' => $filesArray[0]->id,

                            'price' => $product->sell_price,

                            'sku' => $product->sku,

                            'vat' => $product->vat_rate,

                     ];

               }

         }

         $return['items'] = $products_array;

         $return['total_count'] = $count->count();

         return $return;

}



I have uploaded also the screenshot of the select2 as post attachment

7229

select2.png

Thanks everybody :)

This is quite weird but actually I have discovered that setting a number of item per page equal to 5 or more the problem seems to disappear whereas using 4 or less it gets stuck :blink: