Editable field not work correctly after ajax update

[a-goryachev]

SImple example:

<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'toolbar' => false,
        'filterModel' => $searchModel,
        'columns' => [
        [
               'class' => 'kartik\grid\EditableColumn',
               'attribute' => 'url',
               'readonly'=>function($model, $key, $index, $widget) {
                              return false;
               },
               'editableOptions' => [
                       'inputType' => \kartik\editable\Editable::INPUT_TEXT,
                       'options' => [
                       ],
               ],
               'format' => 'url',
        ],
]);?>
<?php \yii\widgets\Pjax::end(); ?>

When we click grid view column header for sorting or type something in filter field, grid view will be updated using ajax (because it placed inside pjax widget). After update, editable field not works.

The root of problem is an event binding method, used in javascript file https://github.com/kartik-v/yii2-editable/blob/master/assets/js/editable.js. Example: $form.on('submit', function (ev) { not works after ajax update $(document).on('submit', $form, function (ev) { works after ajax update. Reason: when DOM element replaced by another HTML content, all children are removed (all event bindings lost) and after removing, new content placed to element (without any event bindings). When we use $(document).on... construction, event bindings will be saved by jQuery and field will work correctly after ajax update.

Sorry my english :)

[tambadiya]

you write your ajax code in your controller..?? like this below

public function actionIndex() {

$searchModel = new UsersSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);

if(Yii::$app->request->post('hasEditable'))
{
     $model =new Users(); 
    $bookId = Yii::$app->request->post('editableKey');
    $model = Users::findOne($bookId);

    $post = [];
    $posted = current($_POST['Users']);
    $post['Users'] = $posted;

 // Load model like any single model validation
if ($model->load($post))
{
    // When doing $result = $model->save(); I get a return value of false
    if($model->save())
    {
    if (isset($posted['name']))
    {
      $output =  $model->name;
    }
    $out = Json::encode(['output'=>$output, 'message'=>'']);
    }
} 
// Return AJAX JSON encoded response and exit
echo $out;
return;
}
return $this->render('index', [

    'searchModel' => $searchModel,
    'dataProvider' => $dataProvider,
]);

}

[a-goryachev]

Yes. I write correct code in controller. All works good when editable grid view not inside <?php \yii\widgets\Pjax::begin(); ?> and <?php \yii\widgets\Pjax::end(); ?> construction. When I use pjax, editable fields not works after I click sort/pagination links of grid view or use filter fields.

[kartik-v]

Do not use your own pjax begin and end.

Remove the PJAX begin and end wrapper.

Use the enhanced pjax property of kartik\grid\GridView... Set it to true and you will automatically see the Editable reinitializing magically. Read the documentation for pjax settings.

If you use your own manual PJAX rendering like you have --- then you need to manage reinitializing all jquery plugins that are inside GridView.

[tambadiya]

so please write like this,i was same issue and i write die instead of return so it's work good..may be it will helpfull for you

$searchModel = new UsersSearch(); $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

if(Yii::$app->request->post('hasEditable')) { $model =new Users(); $bookId = Yii::$app->request->post('editableKey'); $model = Users::findOne($bookId);

$post = [];
$posted = current($_POST['Users']);
$post['Users'] = $posted;

// Load model like any single model validation if ($model->load($post)) { // When doing $result = $model->save(); I get a return value of false if($model->save()) { if (isset($posted['name'])) { $output = $model->name; } $out = Json::encode(['output'=>$output, 'message'=>'']); } } // Return AJAX JSON encoded response and exit echo $out; die; // write die instead of fo return and check it. } return $this->render('index', [

'searchModel' => $searchModel,
'dataProvider' => $dataProvider,

]);

}

[a-goryachev]

Thanks, @kartik-v ! Using pjax property of GridView solved problem.

[GIGS1975]

Hi Kartik. I read all articles and comments about this problem, and your all answers also..Still no solution. The gridview, and data in it, after submitting an editable column field is not refreshing. I set up pjax as you recommended, also take all the suggestions, but nothing. Here is my code:

<?php echo GridView::widget([

'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false
'headerRowOptions'=>['class'=>'kartik-sheet-style'],
'filterRowOptions'=>['class'=>'kartik-sheet-style'],
'pjax' => true, 
'pjaxSettings' =>
            [
                'neverTimeout'=>true,
                'options'=>['id'=>'w0'],
            ],  

'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary'=>true,

'columns'=>

[

    [
        'class'=>'kartik\grid\SerialColumn',
        'width'=>'36px',
        'header'=>'Sorszám',
        'pageSummary'=>'Total'
    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'id_greenery',
        'value'=>'idGreenery.greenery_name',

    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'year',
        'pageSummary'=>false,

    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'month',
        'pageSummary'=>false,
            ],              

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'seeds_plants_rokwool',
        'pageSummary'=>true,

    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'crops_prevention',
        'pageSummary'=>true,

    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'co2',
        'pageSummary'=>true,

    ],

    [
        'class'=>'kartik\grid\EditableColumn',
        'attribute'=>'other_growing_costs',
        'pageSummary'=>true,

    ],

    [
        'class'=>'kartik\grid\DataColumn',
        'attribute'=>'total',
        'pageSummary'=>true,

    ],

],

]); ?>

[Vendict]

@GIGS1975 try $('#w0').yiiGridView('applyFilter'); instead of pjax callback. I know this old problem, but work only this.

[JavierLob]

Hi Kartik. I read all articles and comments about this problem, and your all answers also..Still no solution. The gridview, and data in it, after submitting an editable column field is not refreshing. I set up pjax as you recommended, also take all the suggestions, but nothing. Here is my code:

['style'=>'overflow: auto'], // only set when $responsive = false 'headerRowOptions'=>['class'=>'kartik-sheet-style'], 'filterRowOptions'=>['class'=>'kartik-sheet-style'], 'pjax' => true, 'pjaxSettings' => [ 'neverTimeout'=>true, 'options'=>['id'=>'w0'], ], 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'showPageSummary'=>true, 'columns'=> [ [ 'class'=>'kartik\grid\SerialColumn', 'width'=>'36px', 'header'=>'Sorszám', 'pageSummary'=>'Total' ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'id_greenery', 'value'=>'idGreenery.greenery_name', ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'year', 'pageSummary'=>false, ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'month', 'pageSummary'=>false, ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'seeds_plants_rokwool', 'pageSummary'=>true, ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'crops_prevention', 'pageSummary'=>true, ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'co2', 'pageSummary'=>true, ], [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'other_growing_costs', 'pageSummary'=>true, ], [ 'class'=>'kartik\grid\DataColumn', 'attribute'=>'total', 'pageSummary'=>true, ], ], ]); ?>

<script>
function () {

   $.pjax.reload({container:'#w0'});
}
</script>

I think that you problem it is other, because you are submitting, and the initial problem was that the editable sections were not opens. Your problem maybe is the json response, try return Json::encode(['output'=>'', 'message'=>'']);

[i-internet]

Do not use your own pjax begin and end.

Remove the PJAX begin and end wrapper.

Use the enhanced pjax property of kartik\grid\GridView... Set it to true and you will automatically see the Editable reinitializing magically. Read the documentation for pjax settings.

If you use your own manual PJAX rendering like you have --- then you need to manage reinitializing all jquery plugins that are inside GridView.

And what if not using gridview ?