Nested pjax and $.pjax.reload

Yii 2.0 General Discussions
1

Hi, i’m using the pjax widget in order to load views when the user clicks on a link. I’m using the linkSelector option in my parent pjax widget to be able to do it. Something like this:




<?php Pjax::begin(['enablePushState' => false, 'id' => 'vinculo2', 'linkSelector' => 'a', 'timeout' => 8000, 'scrollTo' => 0, 'clientOptions' => ['skipOuterContainers' => true], 'options' => ['container' => '#contenedor-inicial']); ?>


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

In the loaded views (most of them), I have a child pjax widget to control some gridviews, like this:




<?php Pjax::begin(['id' => 'listapersonasSocio', 'enablePushState' => false, 'timeout' => 5000, 'clientOptions' => ['skipOuterContainers' => true]]) ?>


<?= Gridview::widget([

'dataProvider' => $dataProvider,

// 'filterModel' => $searchModel,

'columns' =>  [

...


...

],

]); ?>


<?php Pjax::end() ?>

After I submit the form with data related to this gridview, I would like to reload the gridview with the new values, so i tried to use $.pjax.reload({container: ‘#listapersonasSocio’}); inside an AJAX call that submits the form. The AJAX call looks like this:




$('body').on('beforeSubmit', 'form#ingresar-sociop', function(e){

    var formsp = $(this);

    console.log(formsp.serialize());

    $.post(

        formsp.attr('action'),

        formsp.serialize()

    )

    .done(function(result){

        console.log(result);

        if(result == 1){

            $(formsp).trigger("reset");

            $.pjax.reload({container: '#listapersonasSocio'});

        }

        else{

            $('#message').html(result);

        }

    }).fail(function(){

        console.log('Error de servidor');

    });

    return false;

});

But this causes the parent pjax widget to reload, so the whole page reloads and a “blank” page appears, since that’s where the parent pjax is located (just a blank view where i load all the content). I tried to use skipOuterContainers option to accomplish what i wanted, but it didn’t work.

Any help would be greatly appreciated, regards.

2

There isn’t a straight forward answer to this. Here is some incite on the real issue behind this

If i have a need for multiple pjax containers on a page i manually do the ajax and push state calls. I only use pjax if there is one on the page. There is a way that i haven’t got to work just using renderPartial and registering the pjax on the parent only. Look at the comments for more info.

3

I see, after reading the issue on github I understand a little bit more about what’s causing the problem. I’ll take a look at the renderPartial method, sounds like a good way to solve the issue.

I’ve also tried to use normal jQuery/AJAX to load the views, and use pjax widget just to control the gridviews, but got the same result (at least using jQuery load() method). Using $.pjax.reload({container: ‘#listapersonasSocio’}); causes the “container” page (where I loaded the views) to load again, so a “blank” page appears.

How should I load my views dynamically without using pjax widget? using pure jQuery/AJAX like this?


$("#container").on('click', '#some-link', function(){

$.ajax({

url: ['controller/some-action'],

type: 'post',

data: some-data,

success: function(result){

console.log('Content will be loaded here.');

$("inner-container").html(result);

},

error: function(result){

console.log('There was an error loading the page.');

});

});

Or should I just stop using pjax widget completely and control the gridviews in some other way? if that’s the case, how could i reload the gridview without using $.pjax.reload({container: ‘#container’});

Thanks for the answer and suggestions skworden, was really helpful.

4

Got it to work by doing the following changes:

In AJAX success block after submitting correctly my form i used $.pjax.reload as follows:


var url = 'index.php?r=historico-socio/index';

$.pjax.reload({url: url, container: '#sociosEmp', push: false, replace: false});

Apparently you need to tell pjax the url to reload when you have nested pjax, i’ve also “manually” disabled replace State because otherwise it kept changing the url, and i’m not using replaceState in my web application.

However, i’ve dropped pjax usage in most of my views because i faced other issues with it, mainly with nested pjax (nested pjax works fine the first time when doing an AJAX load, but after you load the same page again it doesn’t work at all, don’t really know why). Instead i’m using one pjax widget to load content after a link click, and using AJAX to load/manage other content after that.

Maybe this is not the right way to do it but i’ll use this method for now till i find a better solution.

Thanks skworden, your answer here and in other posts gave me a good idea on how to solve the issues.