How could my application layout/pjax be optimized?


I am having a problem with PJAX and I’m willing to bet the layout of my application is not helping the situation…

Here is what my application looks like visually:

Each of those sections above are widgets (active alarms, support tickets, acknowledged alarms, on-call, etc) and each one is in its own view file. Each of these view files contains a pjax container.

I then use javascript to refresh each pjax container on a set timer. This part works and keeps each of the widgets up-to-date with the lastest content in them.

The problem is that when the pjax refresh occurs for each widget, it visually reloads the respective widget, but behind the scenes the view for every widget was also rendered in that call…

And it happens in a peculiar way:

  • the active alarms pjax will render ONLY the active alarms pjax container (good)
  • the support tickets pjax will render the active alarms and support tickets pjax containers (bad)
  • the patching alarms will render the active alarms, support tickets, and patching alarms pjax containers

This rhythm keeps occurring down the page in the order that the views are rendered…

My nesting of the application looks sort of like this:


public function actionWorkstation()

    if (Yii::$app->request->isPjax) {
      return $this->renderPartial('workstation');
    } else {

    return $this->render('workstation');

workstation view:

<?= $this->render('//widgets/alarms_active'); // loads the unacked alarms widget ?>
<?= $this->render('//widgets/tickets_open'); // loads the tickets_open widget ?>
<?= $this->render('//widgets/alarms_patching); // loads the patching alarms widget ?>
   ...And more follow right down the line....

Each of these view files above basically look like this:

// javascript timer for reloading this pjax container

<div id="alarms_active">
  <?= alarms_active::widget() // loads the acked alarms widget ?>

And then alarms_active::widget() calls a .php file in my components/ folder, which in turn renders the view
for the widget in components/views/

The view for the widget uses pjax like this:

Pjax::begin(['enablePushState' => false, 'id'=>'alarms_active_pjax']);

I believe I did this “nesting” of my layout because I had issues originally trying to pjax reload more than one container at the same time…

I hope this makes sense, can anyone offer my advice here?