使用 Yii2 和 Jquery 在模态对话框中重新加载 PJAX 容器答案

【问题标题】：Reload PJAX container inside modal dialog using Yii2 and Jquery使用 Yii2 和 Jquery 在模态对话框中重新加载 PJAX 容器
【发布时间】：2016-07-05 09:32:32
【问题描述】：

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

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

初始重新加载由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))
  }

我的观点的 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');
        }
    });
});

【问题讨论】：

检查服务器响应，它甚至有那个容器吗？
抱歉回复延迟。您的评论为我指明了正确的方向。 pjax 收到的 URL 与模态的 url 不匹配。有关更多信息，请参阅我的答案。

标签： php ajax gridview yii2 pjax

【解决方案1】：

感谢@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');
        }
    });
});

【讨论】：