How to change Grid View using Pjax in yii2? - php

Question

Ok, ill explain what i have first,
--A database table called cases.
This holds all of the cases to i need to display in a gridview
--Three tables called Category, Subcategory and ChildCategory
The cases from table case will be linked to a childcategory.
So i have made three DropDownLists that are populated from the individual category tables in the database. For example:
_categories.php
yii\widgets\Pjax::begin(['id' => 'categories']);
$form = ActiveForm::begin();
echo $form->field($searchModel, 'category')
->dropDownList(
ArrayHelper::map($allCategory, 'id', 'name'),
[
'onchange'=>'getSubcategory()',
]
);
//To stop errors, if first category not chosen make subcategory and empty drop down.
$subcategory = array(
"empty" => ""
);
echo $form->field($searchModel, 'subcategory')
->dropDownList(
ArrayHelper::map($subcategory, 'id', 'name'),
[
'onchange'=>'getChildcategory()',
]
);
//To stop errors, if second category not chosen make childcategory and empty drop down.
$childcategory = array(
"empty" => ""
);
echo $form->field($searchModel, 'childcategory')
->dropDownList(
ArrayHelper::map($childcategory, 'id', 'name'),
[
//'onchange'=>'getChildCategory()',
'onchange'=>'submitNow()',
]
);
ActiveForm::end();
yii\widgets\Pjax::end();
So what happens is when the first category is selected it runs "onchange" => getSubcategory. This will basically send an Ajax request to my controller with the value of the selected option. It will then pull back the subcategories where the subcategory_id = the value of the selected option. It then populated the subcategory drop down with this information.
this function is on _categories.php with the category drop downlists above
function getSubcategory(){
//#casesearch-category is the first drop down list
var firstcategory = $('#casesearch-category').val();
var childcategory = document.getElementById('casesearch-childcategory');
childcategory.options.length = 0;
$.ajax({
url: '<?php echo \Yii::$app->getUrlManager()->createUrl('cases/subcategories') ?>',
type: 'POST',
dataType: 'json',
data: {
firstcategory: firstcategory
},
success: function(data) {
var subcategory = document.getElementById('casesearch-subcategory');
//if select is changed again, make the options length 0 so that it gets rid of previous appends.
subcategory.options.length = 0;
for(var i=0; i<data.length; i++){
subcategory.options[i] = new Option (data[i].name);
subcategory.options[i].value = data[i].subcategory_id;
}
subcategory.options.selectedIndex = -1;
if(subcategory.options.length === 1){
getChildcategory();
}
}
});
}
So when this ajax request reaches my controller it does this:
CasesController.php
public function actionSubcategories()
{
if(isset($_POST['firstcategory'])){
$firstcategory = $_POST['firstcategory'];
// SELECT * FROM `subcategory` WHERE `parent_id` = $firstcategory
$subcategory = Subcategory::findSubcategory($firstcategory);
}
return \yii\helpers\Json::encode($subcategory);
}
Okay so that was just a little bit to help you understand the category side of things. Now i have a gridview that is populated from the database when the page is submitted. However as i have done ajax to get my categories i need the gridview to change with pjax when ever the categories are changed.
So in my controller actionIndex is sends through the searchModel and dataprovider for the gridview like so:
CasesController.php
public function actionIndex()
{
$model = new Cases;
$searchModel = new CaseSearch();
$allCategory = Category::find()->all();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'allCategory' => $allCategory,
'model' => $model
]);
}
Then on my index page where it displays the grid view is here::
NOTE::Index.php renders the category dropdownlists seen above _categories.php
<?= $this->render('_categories', [
'model' => $model,
'searchModel' => $searchModel,
'allCategory' => $allCategory
]) ?>
<?php Pjax::begin(['id' => 'cases']) ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
'case_id',
'name',
'judgement_date',
'year',
'neutral_citation',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end() ?>
Ok So here is the part where i am stuck! I assume what i am meant to do is somehow update the searchModel and dataProvider for the gridview but i am unsure how to do this. As if i send an ajax request to controller to change it it will then have to render the page again which defeats the objective.
at the top of _categories.php
function submitNow(){
$.pjax.reload({container:"#cases"}); //Reload GridView
}
This function is called when the last childcategory is selected.I know something will have to happen here to do this but i do not know what.
Can anyone help?

Answer 1

<?php use yii\widgets\Pjax; ?>
<?php Pjax::begin() ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
'case_id',
'name',
'judgement_date',
'year',
'neutral_citation',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end() ?>