pjax initialize does not work on empty grids

[akorinek]

I'm using a gridview with an editable column in combination with another form to add a new db row using pjax. The form and the gridview are in separate pjax containers.

Everything works fine when there is at least one row in the gridview when the page is loaded. If the grid is empty, then the editable column will not initialize properly on pjax reloads.

I get "Uncaught TypeError: jQuery(...).editable is not a function" when the gridview is reloaded.

Here is the code for the affected view:

registerJs( '$("document").ready(function(){ $("#new_sample").on("pjax:end", function() { $.pjax.reload({container:"#samples"}); }); });' ); ?> registerJs( '$("#samples").on("click", ".ajaxDelete", function(e){ e.preventDefault(); var deleteUrl = $(this).attr("delete-url"); bootbox.confirm("Are you sure you want to delete this sample?", function (result) { if (result) { $.ajax({ url: deleteUrl, type: "post", error: function (xhr, status, error) { alert("There was an error with your request." + xhr.responseText); } }).done(function (data) { $.pjax.reload({container:"#samples"}); }); } } ); });' ); ?> 'new_sample']); $form = ActiveForm::begin(['options' => ['data-pjax' => true], 'type' => ActiveForm::TYPE_INLINE, 'formConfig'=>['labelspan' => 0, 'deviceSize'=>ActiveForm::SIZE_MEDIUM]]); ?>

<div class="panel panel-info">
    <div class="panel-heading">Add Sample</div>
    <div class="panel-body">
            <div class="col-md-4">
                <?= $form->field($SampleModel, 'customer_label')->textInput(['maxlength' => true,'style'=>'width:300px']); ?>
            </div>
            <div class="col-md-4">
                <?= $form->field($SampleModel, 'parent_id')->widget(Select2::className(), [
                        'data' => ArrayHelper::map(Sample::find()->where(['job_id' => $SampleModel->job_id,'parent_id' => null])->asArray()->all(),'id','label'),
                        'options' => ['placeholder' => 'select parent sample'],
                        'pluginOptions' => ['allowClear' => true, 'width' => '100%'],
                    ]);
                ?>
            </div>
            <div class="col-md-3">
                <?= $form->field($SampleModel, 'hazards')->widget(Select2::className(), [
                        'data' => ArrayHelper::map(Hazard::find()->asArray()->all(),'id','name'),
                        'options' => ['placeholder' => 'select hazards', 'multiple' => true],
                        'pluginOptions' => ['allowClear' => true, 'width' => '100%'],
                    ]);
                ?>
            </div>
            <div class="col-md-1">
                <?= Html::submitButton('Create', ['class' => 'btn btn-success']); ?>
            </div>

    </div>
</div>
<?php ActiveForm::end(); Pjax::end(); ?>

'kartik\grid\ExpandRowColumn', 'width' => '50px', 'value' => function ($model, $key, $index, $column) { return GridView::ROW_COLLAPSED;}, 'detail' => function ($model, $key, $index, $column) { return Yii::$app->controller->renderPartial('_expand-row-samples', ['model' => $model]);}, 'detailAnimationDuration' => 'fast', 'headerOptions' => ['class'=>'kartik-sheet-style'], ], 'label', [ 'attribute' => 'customer_label', 'class' => 'kartik\grid\EditableColumn', 'editableOptions' => [ 'formOptions' => ['action' => ['sample/edit']], 'asPopover' => false, 'pjaxContainerId' => 'samples', ], ], ``` 'hazardsAsString', [ 'attribute' => 'status_id', 'vAlign' => 'middle', 'value' => function ($model, $key, $index, $widget) { return $model->status->name; }, 'format' => 'raw' ], [ 'attribute' => 'NumberOfNotes', 'label' => 'Notes', 'vAlign' => 'middle', 'value' => function ($model, $key, $index, $widget) { return $model->NumberOfNotes > 0 ? 'Yes' : 'No'; }, 'format' => 'raw' ], [ 'class' => 'kartik\grid\ActionColumn', 'dropdown' => false, 'vAlign' => 'middle', 'template' => '{delete}', 'controller' => 'sample', 'buttons' => [ 'delete' => function ($url, $model) { return Html::a('', false, [ 'class' => 'ajaxDelete', 'delete-url' => $url, 'pjax-container' => 'samples', 'title' => 'Delete', ] ); } ], ], ``` ]; ?>

<?= GridView::widget([
    'id' => 'sample-gridview',
    'dataProvider'=> $dataProvider,
    'columns' => $gridColumns,
    'responsive' => true,
    'hover' => true,
    'condensed' => true,
    'export' => false,
    'resizableColumns' => true,
    'pjax' => true,
    'pjaxSettings' => ['options' => ['id' => 'samples']],
    'toolbar' => ['content'=> '',],
    'panel' => [
        'heading' => '<h3 class="panel-title">Samples</h3>',
        'type' => 'info',
        'footer' => false,
    ],
]);
?>    

[akorinek]

Solved this problem as described in issue #30 at the bottom. I added to the page:

'customer_label', 'class' => 'kartik\grid\EditableColumn', 'name' => 'hidden', 'inputType'=>\kartik\editable\Editable::INPUT_TEXT, 'containerOptions'=>['style'=>'display:none'], 'pjaxContainerId'=>'none' ]); ?>

Is there a nicer way of doing this?

[kartik-v]

It depends on how you are writing your app specific code and use case.

If you use the default EditableColumn with this extension it takes care of the initialization in the container. You can cross check the demos page - you can try to filter the grid with a vague value - and the grid will return no records - but the editable columns initialize automatically.

If you are rendering your own custom editables content in a pjax container then you need to control their re-init for various cases... the pjax based reinitialization is just provided as an accelerated method to re-init but it may not cover your every use case and you need to control that manually (setting pjaxContainerId to none is not needed - to disable pjax reinit you must ensure it is NOT SET to your pjax container's identifier).

[ricardomm85]

Hi Kartik. Great job!

I think I'm getting the same issue.
The GridView having some EditableColumn it's empty when the user load the page. Then when the user add a new row in the database and it reload the content with $.pjax.reload({container: '#gridview-pjax'})
The new row appears but the EditableColumn fields are broken.

I notice that editable.css and editable.js are not been loaded.

Sorry for my bad English.