Reload PJAX container inside modal dialog using Yii2 and Jquery

Question

I'm having some issues reloading a PJAX container inside a custom modal much like bootstrap's modal.

The goal of this code is to reload the pjax container to reload all submitted comments inside the pjax's Listview.

The initial reload is performed by jQuery but followed by an exception raised in jquery.pjax.js:

jquery.pjax.js:740 Uncaught TypeError: Cannot read property '0' of null

which is part of a function named extractContainer:

  if (fullDocument) {
    var $head = $(parseHTML(data.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]))
    var $body = $(parseHTML(data.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0])) <-- error
  } else {
    var $head = $body = $(parseHTML(data))
  }

My view's pjax:

<?php Pjax::begin([
'id'=>'pjax-post-comments',
'timeout' => 5000,
'enableReplaceState'=>false,
'enablePushState'=>false,
'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);?>
<?php
$query = $model->findComments();
$dataProvider = new ActiveDataProvider([
    'query' => $query,
    'pagination' => [
        'pageSize' => 2, //for development reasons
    ],
]);?>
<div class='resp-col col-12 post-item-comment-history'>
    <?=ListView::widget([
     'dataProvider' => $dataProvider,
     'summary'=>false,
     'itemOptions' => [
         'class' => 'comment-item'
     ],
     'itemView' => '/frontend/comment/_item',
    ]);?>
</div>
<?php Pjax::end() ?> 

My view's jquery call to reload the pjax container:

$('#submit-comment').on('click',function(){
    event.preventDefault();
    var user_id = '<?=Yii::$app->user->identity->id?>';
    var content = $('#comment-content').val();
    var post_id = '<?=$model->id?>';
    var associative_id = $(this).data('assoc-id');
    $.post('/frontend/post/submit-comment', {
        user_id : user_id,
        post_id : post_id,
        content : content,
        associative_id: associative_id
    }, function(response){
        if(response['response'] == true){
            $('#comment-content').removeClass('error-form');
            $('#comment-content').addClass('success-form');
            $(this).data('assoc-id','null');
            $('#comment-content').val('');
            $.pjax.reload({container:"#pjax-post-comments",timeout: 5000});
        }
        else{
            alert(response['errors']);
            $('#comment-content').addClass('error-form');
            $('#comment-content').removeClass('succes-form');
        }
    });
});

Answer 1

Thanks to @Beowulfenator, I was put onto the right track for fixing this issue.

Apparently the pjax module returned the URL of the actual page BEHIND the modal /frontend/index instead of /frontend/post/detail?id=id. Routing the modal's pjax to the correct url was fairly easy:

 $('#submit-comment').on('click',function(){
        event.preventDefault();
        var user_id = '<?=Yii::$app->user->identity->id?>';
        var content = $('#comment-content').val();
        var post_id = '<?=$model->id?>';
        var associative_id = $(this).data('assoc-id');
        $.post('/frontend/post/submit-comment', {
            user_id : user_id,
            post_id : post_id,
            content : content,
            associative_id: associative_id
        }, function(response){
            if(response['response'] == true){
                $('#comment-content').removeClass('error-form');
                $('#comment-content').addClass('success-form');
                $(this).data('assoc-id','null');
                $('#comment-content').val('');
                $.pjax.reload(
{
container:"#pjax-post-comments",
url: '/frontend/post/detail?id=<?=$model->id?>', //manually added the url
timeout: 5000
}
); 
            }
            else{
                alert(response['errors']);
                $('#comment-content').addClass('error-form');
                $('#comment-content').removeClass('succes-form');
            }
        });
    });

EDIT: The downside to this is that the script must be INSIDE the pjax for the code to be operational. The downside to THAT is that I have to reinitialise the click every time, otherwise the $('#submit-comment').on('click',function()); will click cumulative So here's how to fix that:

$('#submit-comment').on('click',function(){
    event.preventDefault();
    event.stopImmediatePropagation();
    $(this).unbind('click'); 
    alert('');
    var user_id = '<?=Yii::$app->user->identity->id?>';
    var content = $('#comment-content').val();
    var post_id = '<?=$model->id?>';
    var associative_id = $(this).data('assoc-id');
    $.post('/frontend/post/submit-comment', {
        user_id : user_id,
        post_id : post_id,
        content : content,
        associative_id: associative_id
    }, function(response){
        if(response['response'] == true){

            $('#comment-content').removeClass('error-form');
            $('#comment-content').addClass('success-form');
            $(this).data('assoc-id','null');
            $('#comment-content').val('');
            $.pjax.reload({container:"#pjax-post-comments",url: '/frontend/post/detail?id=<?=$model->id?>',replace:false,timeout: 5000});
            init();
        }
        else{
            alert(response['errors']);
            $('#comment-content').addClass('error-form');
            $('#comment-content').removeClass('succes-form');
        }
    });
});