Question

我在自定义PJAX内重新加载modal容器时遇到了一些问题，就像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))
  }

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

Answer 1

感谢@Beowulfenator，我已经走上正确的道路来解决这个问题。

显然，pjax模块返回了实际page的网址，而不是modal /frontend/index而不是/frontend/post/detail?id=id。将modal的{{1}}路由到正确的网址非常简单：

pjax

编辑：这样做的缺点是脚本必须位于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", 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'); } }); });会点击累积所以这里是如何解决这个问题：

$('#submit-comment').on('click',function());

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

1 个答案: