使用Yii2和Jquery在模态对话框中重新加载PJAX容器 - Reload PJAX container inside modal dialog using Yii2 and Jquery

我在自定义modal中重新加载PJAX容器时遇到一些问题，就像bootstrap的modal一样。

此代码的目标是重新加载pjax容器以重新加载pjax的Listview中的所有提交的注释。

初始加载由jQuery执行，但随后在jquery.pjax.js中引发异常:

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

是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() ?>

我的视图的jquery调用重新加载pjax容器:

$('#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');
        }
    });
});

多亏了@Beowulfenator，我才走上了解决这个问题的正确轨道。

显然，pjax模块返回了modal /frontend/index后面的实际page的URL，而不是/frontend/post/detail?id=id。将modal的pjax路由到正确的url相当容易:

 $('#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');
            }
        });
    });

编辑:这样做的缺点是脚本必须在pjax内部的代码是可操作的。这样做的缺点是，我必须重新初始化每次点击，否则$('#submit-comment').on('click',function());会点击累积，所以这里是如何解决这个问题:

$('#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');
        }
    });
});