TabularInput not working in bootstrap modal.

[hirenbhut93]

I implement TabularInput widget in bootstrap modal but is not working Add More button and ajax validation.Please check this issue.

[unclead]

@hirenbhut93 Can you provide an example of code to reproduce an issue

[hirenbhut93]

My View Code

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>

<?php $form = ActiveForm::begin([
    'id' => 'multi-input',
]); ?>

    <?= unclead\widgets\TabularInput::widget([
        'models' => $models,
        'addButtonPosition' => unclead\widgets\MultipleInput::POS_HEADER,
        'addButtonOptions' => [
            'class' => 'btn btn-success', 
            'label' => '<i class="glyphicon glyphicon-plus"></i> Add More'
        ],
        'removeButtonOptions' => [
            'class' => 'btn btn-danger', 
            'label' => '<i class="glyphicon glyphicon-remove"></i> Remove'
        ],
        'allowEmptyList' => false,
        'attributeOptions' => [
            'enableAjaxValidation' => true,
            'enableClientValidation' => false,
            'validateOnChange' => false,
            'validateOnSubmit' => true,
            'validateOnBlur' => false,
        ],
        'columns' => [
            [
                'name'  => 'egl_name',
                'title' => $models[0]->getAttributeLabel('egl_name'),
                'enableError' => true,
            ],
            [
                'name'  => 'egl_min_marks',
                'title' => $models[0]->getAttributeLabel('egl_min_marks'),
                'enableError' => true,
            ],
            [
                'name'  => 'egl_max_marks',
                'title' => $models[0]->getAttributeLabel('egl_max_marks'),
                'enableError' => true,
            ],
            [
                'name'  => 'egl_point',
                'title' => $models[0]->getAttributeLabel('egl_point'),
                'enableError' => true,
            ],
            [
                'name'  => 'egl_level',
                'title' => $models[0]->getAttributeLabel('egl_level'),
                'type'  => 'radioList',
                'enableError' => true,
                'items' => $models[0]->getGradeLevelList(),
            ],
        ],
    ]) ?>

    <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-primary' : 'btn btn-info']) ?>

<?php ActiveForm::end(); ?>

My Controller Action

public function actionCreate()
{
    $esModel = new DemoSingle();
    $models = [new DemoMulti()]; 

    if ($esModel->load(Yii::$app->request->post()) && $eglData = Yii::$app->request->post('DemoMulti', [])) {
        foreach (array_keys($eglData) as $index) {
            $models[$index] = new DemoMulti();
        }

        if (Model::loadMultiple($models, Yii::$app->request->post()) && Yii::$app->request->isAjax) {
            \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
            return \yii\widgets\ActiveForm::validateMultiple($models);
        }

        if ($esModel->save()) {
            foreach ($models as $single) {
                // my code
            }
        } 
    } elseif(Yii::$app->request->isAjax) {
        return $this->renderAjax('create', [
            'esModel' => $esModel,
            'models' => $models
        ]);
    }

    return $this->render('create', [
        'esModel' => $esModel,
        'models' => $models,
    ]);
}

Note

This code without bootstrap modal work perfect
Your MultipleInput widget is work perfectly in bootstrap modal but TabularInput is not work.

[unclead]

I have tried to reproduce and for me everything works correctly.
See my gist https://gist.github.com/unclead/bb4edad36ee5767facb7
If you try to use widget in other way please provide the code snippet which can me help to understand how you are using TabularInput with Modal
Also it can be usefull if you make a screenshot of Console tab in chrome dev tool. Probably i have some js errors there

[hirenbhut93]

@unclead Your given code is work for Add More and Remove button in Bootstrap Modal but Ajax validation not work in my first row. when i added more row at time other row validation successfully.

Note:

I call Bootstrap Modal using load() method below jquery.
Ajax validation is not work in Radio button for me with or without modal.
No JS Errors produce in my browser Console.

My button code like this

<?= Html::a('<span class="glyphicon glyphicon-plus-sign"></span> Create New', ['create'], ['class' => 'btn btn-default link-modal']) ?>

My jquery code like this

jQuery(document).on('ready pjax:success', function() {
    $('.link-modal').click(function(e) {
        e.preventDefault();
        $('#my-modal').modal('show').find('.modal-content').load($(this).attr('href'));
    });
});

[unclead]

I don't know whether i have reproduced this issue correctly or not, but i found the following. When you get TabularInput via ajax you must specify an id for widget

    <?= unclead\widgets\TabularInput::widget([
        'id' => 'some-id
        'models' => $models,

otherwise the widget will get random ID and it can be the same as id of others elements on the page.
In my case it was id w0 and the page has already contained Nav widget with the same ID that is why TabularInput has not been initialized in correct way and nothing has worked.

But after i specified id the widget become to work correct (http://prntscr.com/a8ikyc)

[hirenbhut93]

@unclead thanks Ajax Validation and Add More Problem resolved but Ajax validation is not work in Radio button for me with or without modal.

[unclead]

You are right. There is a bug with validation of this types of input. I found the reason but i need a time to fix it. I created separate issue #64

This issue is solved and i close it.