Yii2 Gridview data not changing in Pjax - yii2

Question

Hello i am performing search using pjax in yii2 . I am following this link.
Above link in given for submit which is working fine, but i want to perform on change of slider.
Here is screenshort of my form .
index.php
<div class="bank-index">
<?php echo $this->render('_search', ['model' => $searchModel]); ?>
<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'bank_name',
'state',
'district',
'city',
'branch',
'time',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
_search.php
<div class="bank-search">
<?php Pjax::begin(['id' => 'Pjax_bank_id']); ?>
<?php $form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
]); ?>
<?= $form->field($model, 'id') ?>
<?= $form->field($model, 'bank_name') ?>
<?= $form->field($model, 'state') ?>
<?= $form->field($model, 'district') ?>
<?= $form->field($model, 'city') ?>
<?=
$form->field($model, 'time')->widget(Slider::classname(), [
'pluginOptions'=>[
'min'=>0,
'max'=>20,
'step'=>1
]
]);
?>
<?php // echo $form->field($model, 'branch') ?>
<div class="form-group">
<?= Html::submitButton(Yii::t('app', 'Search'), ['class' => 'btn btn-primary']) ?>
<?= Html::resetButton(Yii::t('app', 'Reset'), ['class' => 'btn btn-default']) ?>
</div>
<?php ActiveForm::end(); ?>
**How i have registered js file**
registerJs($this->render('searchJs.php')); ?>
searchJs.php
$('#banksearch-time').on('slideStop', function(){
alert('hello');
var form = $(this);
if(form.find('.has-error').length) {
return false;
}
$.ajax({
url: form.attr('action'),
type: 'post',
data: form.serialize(),
success: function(response) {
var csrf = yii.getCsrfToken();
var bank_name = $('#banksearch-bank_name').val();
var state = $('#banksearch-state').val();
var district = $('#banksearch-district').val();
var city = $('#banksearch-city').val();
var time = $('#banksearch-time').val();
var url = 'index'+ '&_csrf='+csrf+'&BankSearch[bank_name]='+bank_name+'&BankSearch[state]='+state+'&BankSearch[district]='+district
+'&BankSearch[city]='+city +'&BankSearch[time]='+time;
$.pjax.reload({url: url, container:'#Pjax_bank_id'});
}
});
}).on('submit', function(e){
e.preventDefault();
});

Answer 1

Solved The problem was I have not assigned the id to Pjax in gridview.<?php yii\widgets\Pjax::begin(['id' => 'gridresult']) ?>
I have assigned Pjax id of _search .php.
I changed From: $.pjax.reload({url: url, container:'#gridresult'});
TO: $.pjax.reload({url: url, container:'#gridresult'});

Answer 2

Good you solved the problem. Here is the another approach. Someone might find this helpful:
$url = \Yii::$app->getUrlManager()->createUrl('bank/index');
<?= $form->field($model, 'time')->widget(Slider::classname(), [
'pluginOptions'=>[
'min'=>0,
'max'=>20,
'step'=>1
],
'pluginEvents' => [
"slideStop" => "function() { refreshGridview($(this).val())}",
]
]); ?>
$js1 = <<<JS
function refreshGridview(value)
{
$.ajax({
url: "$url",
type: 'post',
data: { "BankSearch[id]": value, },
success: function(response) {
var csrf = yii.getCsrfToken();
var bank_id = value;
$.pjax.reload({
url: "$url",
method: 'POST',
data: {
_csrf: csrf,
"BankSearch[id]": value,
},
container:'#bank'
});
}
});
}
JS;
$this->registerJs($js1);
On slidestop plugin event call the custom function with the current value of slider and then through Pjax update the gridview.