How to use Pjax to partially refresh a page?

Question

css

Welcome all.
There is an action

public function actionIndex($id = 1)
    {
        $employees = Employee::find()
            ->orderBy(['name' => SORT_ASC]) 
            ->all();

        $emp = Employee::findOne($id);

        return $this->render('index', [
            'employees' => $employees, 
            'emp' => $emp
            ]);
    }

On the page on the left there will be a vertical menu with employees, on the right side I want to display information about them, but without reloading the page. At first I wanted to do it with renderAjax, but nothing came of it. Now trying to do with Pjax. Here is the view:

<div class="site-index">
    <div class="body-content">
        <div class="row">
            <div class="col-lg-2">
                <p>
                <?php foreach ($employees as $employee) {
echo "<a href=# onclick=\"$.pjax.reload('#pjaxId', {timeout : false});\">".$employee->name."</a><br /><br />";                
                    }
                ?>
                </p>
            </div>
            <div class="col-lg-9">

                <?php Pjax::begin(['id' => 'pjaxId']); 

                    echo $this->render('_view', ['emp' => $emp]);

                Pjax::end(); ?>

            </div>
        </div>
    </div>
</div>

_view.php

<div class="employee-view" id="pjaxId">
    <?= $emp->name;  ?>
</div>

I understand that some kind of nonsense is obtained in the view, I have been struggling with this all day.

Answer 1

Via z-index in layers

Answer 2

Well, firstly, send the designer back, let him cut off the trees from the background

Answer 3

border can be part of the background, why type it up? Well, or play around with layers. You can still stir up a beautiful parallax, if the forest is already a separate layer.

Answer 4

wrap everything in the view in pjax

Answer 5

The problem is that in pjax.reload you use $employee->id as the ID of the Pjax container to be reloaded. Those. in fact, now you have one container with the identifier $emp->id, and when forming links, you specify the identifiers of containers that do not exist at all. Why do you use $emp->id as the identifier of the Pjax container, what is the sacred meaning? Just set the container id to a constant value, for example , and when pjax.reload use it, not $employee->id