リロードPJAXのYii2を使用してモーダルダイアログ容器内部とjQuery

Question

私はずっと、ブートストラップのmodalのようなカスタムmodal内PJAXコンテナを再読み込みするいくつかの問題を抱えています。

このコードの目的は、pjaxさんListview内のすべての提出コメントをリロードするpjaxコンテナをリロードすることです。

初期リロードがjQueryによって行われるが、jquery.pjax.jsで発生した例外が続いている：

extractContainerという名前の関数の一部である

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

：

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

pjaをリロードするために私のビューのjquery呼び出しx容器：

$('#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モジュールは、modal/frontend/index代わりの/frontend/post/detail?id=id BEHIND実際pageのURLを返しました。正しいURLにmodalの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'); 
      } 
     }); 
    }); 

EDITを：これの欠点は、コードが動作するためのスクリプトがpjax INSIDEでなければならないということです。それもそのcontaineを持っていない、

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