Filter data with kartik Select2 widget in gridview

Question

I've added a kartik select2 widget on top of the index page. My intention is to filter 2 gridview simultaneously in the same page with the same selected value. I have written the jquery and the json result(alert) is showing fine. But cannot get the result in the gridview. Please help. Please let me know if there's any better approach in this regard. My index.php file -

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use kartik\select2\Select2;
use yii\helpers\ArrayHelper;
use frontend\modules\productstockbook\models\Productnames;
use yii\helpers\Json;

/* @var $this yii\web\View */
/* @var $searchModel frontend\modules\productstockbook\models\ProductionSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Productions';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="production-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <?php

        //echo $list=CHtml::listData(Productnames::model()->findAll(), 'productnames_productname', 'productnames_productname');

        //$model->productnames_productname = 2;
        echo Select2::widget([
        'model' => $model,
        'attribute' => 'productnames_productname',
        'data' => ArrayHelper::map(Productnames::find()->all(),'productnames_productname','productnames_productname'),
        'options' => ['placeholder' => 'Select Product', 'id' => 'catid'],
        'pluginOptions' => [
            'allowClear' => true
        ],
        ]);
     // echo Select2::widget([
     //                        'attribute' => 'productnames_productname',
     //                        //'model' => $model,
     //                        'data' => ArrayHelper::map(Productnames::find()->all(),'productnames_productname','productnames_productname'),
     //                        'options' => ['placeholder' => 'Pilih Guru...', 'id' => 'guru-id', 'class' => "form-control"],
     //                        'pluginOptions' => [
     //                            'allowClear' => true,
     //                            'theme' => \kartik\widgets\Select2::THEME_BOOTSTRAP
     //                        ],
     //                    ]);
    ?>
    <div class= 'col-md-6'>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            //'productionid',
            'productiondate',
            //'itemid',
            'productname',
            //'batchno',
            'prodqty',

            //['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>

<div class='col-md-6'>

    <?php
        echo GridView::widget([
        'dataProvider' => $dataProvider2,
        'filterModel' => $searchModel2,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'billdate',
            'productsales_partyname',
            'productname',
            'total',

        ], 
        ]); 
      ?>
  </div>
</div>
<?php
$script = <<< JS
$('#catid').change(function(){   
    var catid = $(this).val();

     $.get('index.php?r=productstockbook/production/get-for-production',{ catid : catid }, function(data){
        alert(data);
        var data = $.parseJSON(data);
        //I'm missing this part
    });
});
JS;
$this->registerJs($script);
?>

My Controller

<?php

namespace frontend\modules\productstockbook\controllers;

use Yii;
use frontend\modules\productstockbook\models\Production;
use frontend\modules\productstockbook\models\ProductionSearch;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;
use frontend\modules\productstockbook\models\ProductsalesSearch;
use yii\helpers\Html;
use frontend\modules\productstockbook\models\Productnames;
use yii\helpers\Json;

/**
 * ProductionController implements the CRUD actions for Production model.
 */
class ProductionController extends Controller
{
    /**
     * @inheritdoc
     */
    public function behaviors()
    {
        return [
            'verbs' => [
                'class' => VerbFilter::className(),
                'actions' => [
                    'delete' => ['POST'],
                ],
            ],
        ];
    }

    /**
     * Lists all Production models.
     * @return mixed
     */
    public function actionIndex()
    {
        $searchModel = new ProductionSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        $searchModel2 = new ProductsalesSearch();
        $dataProvider2 = $searchModel2->search(Yii::$app->request->queryParams);
        $model = new Productnames();
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'searchModel2' => $searchModel2,
            'dataProvider2' => $dataProvider2,
            'model' => $model,
        ]);
    }

    /**
     * Displays a single Production model.
     * @param integer $id
     * @return mixed
     */
    public function actionView($id)
    {
        return $this->render('view', [
            'model' => $this->findModel($id),
        ]);
    }

    /**
     * Creates a new Production model.
     * If creation is successful, the browser will be redirected to the 'view' page.
     * @return mixed
     */
    public function actionCreate()
    {
        $model = new Production();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->productionid]);
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

    /**
     * Updates an existing Production model.
     * If update is successful, the browser will be redirected to the 'view' page.
     * @param integer $id
     * @return mixed
     */
    public function actionUpdate($id)
    {
        $model = $this->findModel($id);

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->productionid]);
        } else {
            return $this->render('update', [
                'model' => $model,
            ]);
        }
    }

    /**
     * Deletes an existing Production model.
     * If deletion is successful, the browser will be redirected to the 'index' page.
     * @param integer $id
     * @return mixed
     */
    public function actionDelete($id)
    {
        $this->findModel($id)->delete();

        return $this->redirect(['index']);
    }

    /**
     * Finds the Production model based on its primary key value.
     * If the model is not found, a 404 HTTP exception will be thrown.
     * @param integer $id
     * @return Production the loaded model
     * @throws NotFoundHttpException if the model cannot be found
     */
    protected function findModel($id)
    {
        if (($model = Production::findOne($id)) !== null) {
            return $model;
        } else {
            throw new NotFoundHttpException('The requested page does not exist.');
        }
    }
    public function actionGetForProduction($catid)
    {
        $production = Production::find()->where(['productname'=>$catid])->asArray()->all();
        //$bottle -> select(['productnames.productnames_productname','productnames.bottletype','bottlename.unitprice'])->from('Productnames')->leftJoin('bottlename','productnames.bottletype = bottlename.bottlename')->where(['productnames_productname'=>$catid])->limit(1);
        echo Json::encode($production);
    }
}

Answer 1

Change your script as follows

<?php
 $script = <<< JS
 $('#catid').change(function(){   
   var catid = $(this).val();
   // make http request as select value changes , 
   window.location = 'index.php?r=productstockbook/production/get-for-production&catId='+catid; 
});
JS;

$this->registerJs($script);
?>

Change your controller action

public function actionIndex()
{   
    $catId = yii::$app->request->get('catId');

    $searchModel = new ProductionSearch();
    // pass catId to search model function
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams,$catId);

    $searchModel2 = new ProductsalesSearch();
    $dataProvider2 = $searchModel2->search(Yii::$app->request->queryParams,$catId);

    $model = new Productnames();
    return $this->render('index', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
        'searchModel2' => $searchModel2,
        'dataProvider2' => $dataProvider2,
        'model' => $model,
    ]);
}

Customize your both search Model Search functions by including the new variable.

For eg

public function search($params,$catId)
{
    $query = YourModel::find();

    // filter query object with the passed value.
    $query->andWhere(['your_search_column' => $catId]);



    $dataProvider = new ActiveDataProvider([
        'query' => $query,
    ]);

    if (!($this->load($params) && $this->validate())) {
        return $dataProvider;
    }

    $query->andFilterWhere([
        // your filtering codes
    ]);

    return $dataProvider;
}