Yii Framework Forum: Select2 infinite scroll stuck on first page - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Select2 infinite scroll stuck on first page Rate Topic: -----

#1 User is offline   toaster 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 30
  • Joined: 24-December 13
  • Location:Perugia - Italy

Posted 29 December 2016 - 09:06 AM

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

Attached File  select2.png (42.2K)
Number of downloads: 6

Thanks everybody :)
Backend Developer at DigiSin
0

#2 User is offline   toaster 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 30
  • Joined: 24-December 13
  • Location:Perugia - Italy

Posted 29 December 2016 - 09:46 AM

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:
Backend Developer at DigiSin
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users