Yii2 advanced template




<?php 

use yii\helpers\Html;

use yii\bootstrap\ActiveForm;

use kartik\tabs\TabsX;

use kartik\date\DatePicker;

use frontend\models\OpStates;

use frontend\models\OpContact;

use frontend\models\OpCountries;

use frontend\models\OpClient;

use frontend\models\OpUnit;

use frontend\models\OpMaintenanceCharges;

use yii\helpers\ArrayHelper;

use yii\helpers\Url;




$this->title = 'Change Profile';

$this->params['breadcrumbs'][] = $this->title;


?>


<div class="site-changedetails">

    

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

  <?= TabsX::widget([

        'position' => TabsX::POS_ABOVE,

        'align' => TabsX::ALIGN_LEFT,

        'items' => [

            [

                'label'=>'Client Details',

                'content'=>

                        '<div class="row">

                            <div class="col-md-12">'.

                                $form->field($model, "client_code")->textInput(["maxlength" => true]).'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                               $form->field($model, "contact_id")->dropDownList(ArrayHelper::map(OpContact::find()->all(),'id','code')).'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                              $form->field($model, "unit_id")->dropDownList(ArrayHelper::map(OpUnit::find()->all(),'id','code')).' 

                            </div>

                        </div>


                       <div class="row">

                            <div class="col-md-12">'.

                                $form->field($model, 'country_id')->dropDownList(ArrayHelper::map(OpCountries::find()->all(),'id','name'),

                                    [

                                        'prompt' => 'Select Country',

                                         'onchange' => '

                                                            $.post("index.php?r=op-states/lists&id='.'" + $(this).val(), function(data){

                                                                    $("select#opclient-states_id").html(data);

                                                            });' 

                                    ]).'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                $form->field($model, 'states_id')->dropDownList(ArrayHelper::map(OpStates::find()->all(),'id','state_name'),

                                            [

                                                'prompt' => 'Select States',

                                                

                                            ]).'

                           </div>

                        </div>


                        <div class="row">

                            <div class="col-md-6">'.

                                $form->field($model, 'city')->textInput(['maxlength' => true]).'

                            </div>


                            <div class="col-md-6">'.

                                 $form->field($model, 'postcode')->textInput().'

                            </div>

                        </div>


                        <div class="form-group">

                          <div class="row">

                             <div class="col-md-1 col-md-offset-11">'.

                                 Html::submitButton('Save',['class'=>'pull-right btn btn-primary','style'=>'width:70px; height:40px;','name'=>'button1']).'

                            </div>

                          </div>

                        </div>

                        '

            ],


            [

                'label'=>'Client Details 2',

                'content'=>

                     '  <div class="row">

                            <div class="col-md-12">'.

                                $form->field($model, "charge_interest")->dropDownList(['Yes'=>'Yes','No'=>'No']).'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                $form->field($model, 'interest_effective_date')->widget(DatePicker::classname(), [


                                            'pluginOptions' => [

                                                'autoclose'=>true,

                                                'format' => 'yyyy-mm-dd',

                                                 'todayHighlight' => true,

                                                'todayBtn' => true,

                                            ]

                                        ]).'

                            </div>

                        </div> 


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "charge_reminder")->dropDownList(['Yes'=>'Yes','No'=>'No']).'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "external_debtor_code")->textInput().'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "mailing_address1")->textInput().'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "mailing_address2")->textInput().'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "mailing_address3")->textInput().'

                            </div>

                        </div>


                        <div class="row">

                            <div class="col-md-12">'.

                                 $form->field($model, "mailing_address4")->textInput().'

                            </div>

                        </div>

                    '

            ],


            [

                'label'=>'Maintenance Charges',

               'content' => $this->render('//op-maintenance-charges/index', [

                                'model'=>$model,

                                'dataProviderMainCharges' => $dataProviderMainCharges,

                                ]),


            ],

           

            [

                'label'=>'Misc Charges',

               'content' => $this->render('//op-misc-charges/index', [

                                'model'=>$model2,

                                'dataProviderMiscCharges' => $dataProviderMiscCharges,

                                ]),

            ],


            [

                'label'=>'Occupier Details',

               'content' => $this->render('//op-occupier/index', [

                                'model'=>$model2,

                                'dataProviderOccupier' => $dataProviderOccupier,

                                ]),

            ],

        ]

    ]); ?>


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

</div>



My form have 5 tab and the first 2 tab is normal filling information while the following tab is render other modal index(which include CRUD). The problem is only the 3rd tab is working, while the 4th n 5th tab when i click create the screen juz become black and hang. Anyone know why? Thanks

This is the 3rd tab.7364

Capture.PNG

Then the 4thh and 5th tab just hang there.The form didnt even appear.7365

2.PNG