I have page with tabs (which are actually links handled by parent pjax). Which loads the tab content via pjax calls.
In one of the tabs, I have a gridview which is inside a pjax container. So that makes it a nested one. The problem is that the nested one when loaded and inserted into the page, does not include it's own javascript i.e:
jQuery(document).pjax("#history-gridview a", "#history-pjax", {"push":true,"replace":false,"timeout":5000,"scrollTo":false});
You need to call renderAjax() when requesting the tab page (or content). I do something like this:
if (Yii::$app->request->isAjax) return $this->renderAjax('myview');
else return $this->render('myview');
However, it may not fix your problem. I've found if I navigate tabs and a grid is loaded dynamically in the tab (with its own pjax container), then any interaction with grid sort and filter tries to reload from the outer (pjax tab) container even with skipOuterContainers set to true.
On a side note, the developers are thinking of dropping pjax support completely as per here as well as how asset bundles work.
The question remains:
How to create super fast performance like an SPA (single page app) without Angular2 or similar? The grid container within a tab container is the perfect example which, if could be achieved (catering for back/forward buttons, initialisation scripts) would be awesome.
