Yii2: repeat fields from related model

Question

Hi I have two tables/Model Company and partners. One company can have multiple partners.

I have tried to repeat the partner field in the company form.

This is working quite well, except in condition that if I have not added any partner at the time of creation, I am not able to add partners on update, which means no field is shown for partners on update if there is no partner.

My code for _form.php is like this:

<script type="text/javascript">

    function addNewSection(divToAppend, modelName) {
        $cloneDiv = $("#" + divToAppend).children().last().clone();
        updateControlId($cloneDiv, modelName);
        $cloneDiv.find('#divDelete').removeClass('dnone').addClass('dblock');
        $cloneDiv.find("#divDelete").removeClass('hidden');
        $cloneDiv.appendTo("#" + divToAppend);
    }

    function updateControlId($cloneDiv, modelName) {
        $cloneDiv.find("[name*='" + modelName + "']").each(function() {
            var name = $(this).attr('name');
            var id = $(this).attr('id');
            var splittedStr = id.split("-");
            var modelName = 'Partners';           
            var index = parseInt(splittedStr[1]) + 1;
            var newId = modelName + "-" + index;
            var newName = modelName + "[" + index;
            var ind = name.indexOf("]");
            //update the id 
            id = id.replace(id.substr(0, modelName.length + 2), newId);
            //update the name
            name = name.replace(name.substr(0, ind), newName);
            $(this).attr('id', id);
            $(this).attr('name', name);
            $(this).val('');
        });
    }

    function deleteSection(obj, parentDiv) {
        if ($("#" + parentDiv + " > div").length > 1) {
            $(obj).parent().parent().remove();
        }
    }
</script>

<style>
    .dnone {
        display: none !important;
    }
    .dblock {
        display: block !important;
    }
</style>

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

/* @var $this yii\web\View */
/* @var $model app\models\Company */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="company-form">

    <?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'name')->textInput(['maxlength' => 255]) ?>
    <?= $form->field($model, 'address')->textInput() ?>
    <?= $form->field($model, 'phone')->textInput(['maxlength' => 55]) ?>
    <?= $form->field($model, 'email')->textInput(['maxlength' => 255]) ?>

    <div id="companyPartners">
        <?php $id = 0; ?>       
        <?php foreach ($partnerModels as $partner) { ?> 
            <div id="language" class="work-data-pad brdr-work marbtm10 row">
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'name')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">   
                    <?= $form->field($partner, '[' . $id . ']' . 'email')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'mobile')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div style="margin-top: 30px;" class="col-md-3 <?php echo ($id < 1) ? 'dnone' : 'dblock'; ?>" id="divDelete" class="row-fluid">           
                <a class="ft11 btn-remove" onclick="deleteSection(this, 'companyPartners');"><span class="marleft18">Remove</span></a>               
                </div>  
            </div>
         <?php $id++; ?> 
        <?php } ?>
    </div>

    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-primary sec-btn marbtm10" onclick="addNewSection('companyPartners', 'Partners')">+ Add Partner</button>
        </div>
    </div>

    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
        </div>
    </div>
    <?php ActiveForm::end(); ?>

</div>

and code in my controller update action is like this:

public function actionUpdate($id) {
        $model = $this->findModel($id);
        $partnerModels = $model->partners;

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            \app\models\Partners::deleteAll('company_id = '. $model->id);

            foreach ($_POST['Partners'] as $partner) {
                if (!empty($partner['name']) && !is_null($partner['name'])) {
                    $partnerModel = new \app\models\Partners();
                    $partnerModel->attributes = $partner;
                    $partnerModel->company_id = $model->id;
                    $partnerModel->save();
                }
            }
            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            return $this->render('update', [
                        'model' => $model,
                        'partnerModels' => $partnerModels
            ]);
        }
    }

Now How I can't make it out what is going wrong here? But I am not getting the fields for partners on update. Please tell me if any more info is needed.

I will welcome if there is a better solution to the one I am using here.

Thanks

Answer 1

Of course it does not work, look at your javascript, you are cloning the last row to add a new line, you have no last row because you have no partners in the list.

There are several options, probably the simplest one for you is to add a hidden row at the top. In this way you will always have a last row. Remember to make the row visible when you clone it.

Something like

<div id="companyPartners">
        <?php $id = 0; ?>
        <?php $partner = new \app\models\Partners(); ?>
            <div style="display: none;" id="language" class="work-data-pad brdr-work marbtm10 row">
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'name')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">   
                    <?= $form->field($partner, '[' . $id . ']' . 'email')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'mobile')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div style="margin-top: 30px;" class="col-md-3 <?php echo ($id < 1) ? 'dnone' : 'dblock'; ?>" id="divDelete" class="row-fluid">           
                <a class="ft11 btn-remove" onclick="deleteSection(this, 'companyPartners');"><span class="marleft18">Remove</span></a>               
                </div>  
            </div>

        <?php foreach ($partnerModels as $partner) { ?> 
            <div id="language" class="work-data-pad brdr-work marbtm10 row">
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'name')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">   
                    <?= $form->field($partner, '[' . $id . ']' . 'email')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div class="col-md-3">     
                    <?= $form->field($partner, '[' . $id . ']' . 'mobile')->textInput(['maxlength' => 255]) ?>      
                </div>
                <div style="margin-top: 30px;" class="col-md-3 <?php echo ($id < 1) ? 'dnone' : 'dblock'; ?>" id="divDelete" class="row-fluid">           
                <a class="ft11 btn-remove" onclick="deleteSection(this, 'companyPartners');"><span class="marleft18">Remove</span></a>               
                </div>  
            </div>
         <?php $id++; ?> 
        <?php } ?>
    </div>

Then in your function addNewSection(divToAppend, modelName) { you can add a line to make the $cloneDiv attr display as block.

There are more elegant ways but it would take a long time to explain how they work.