如何在Yii2中将2个模型加载到单个视图中

Question

Problem
This problem is regarding Yii2 project which should show relevant Recipient list when click on the User Group name.
At the moment I have created all the databases, models, CRUD generations with gridviews & working perfectly.
But the problem is when I click on the grid item it navigates to another view (the default way) as following pic which I want to load in a part of the same view.

---

User-groups (view -> index.php)

    <?php Pjax::begin(); ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        //navigate to the relevent recipient list by click on the group name
        'rowOptions' => function ($model, $key, $index, $grid) {
                    return [
                        'style' => "cursor: pointer",
                        'id' => $model['group_id'],
                        'onclick' => 'location.href="'.Yii::$app->urlManager->createUrl('recipient-list/recipients').'&scenario=RECIPIENTS&params="+(this.id);',
                    ];  
                },

        'columns' => [
            'group_id',
            'group_name',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    <?php Pjax::end(); ?>

I have given the rowOptions in the GridView so that the record can be clicked & navigate to the recipient list through the URL. Then that will be captured from the controller & filter the result according to group_id & render the view.

---

What I want

I want to dynamically load the recipient list when click on the left side group list.
I have tried

• iFrames but it is not working properly. it works as a separate tab in the browser.
• added many Yii navigation extensions like sideNavs by kartik for group list. But the problem was it haven't the ability to getting data from database. when I create a group it didn't show in the list. (It is good if the side nav was static)

So .. What I want to know is, is there are any way to do this with the controller or is there any Jquery code to support this...

any suggestions or references are warmly welcome.

Answer 1

you can use jQuery .load for this.

lets say your recipient list container div has a id of #recipient-list so all you have to do is add the following on your onclick event:

$( "#recipient-list" ).load("YOUR_URL"); return false;
// replace YOUR_URL with the url you are generating already
// and don't forget the return false part. it't there so that link doesn't redirect

Answer 2

When you click in the row, on click event you will make an ajax request to retrieve the data for the second grid (Recipient List)

on success or complete of ajax request you will call $.pajax.reload to refresh the data in second grid like this

$.pjax.reload({container:'#recipient-list'});