Reload PJAX-Container in modalen Dialog mit Yii2 und Jquery

Question

Ich habe einige Probleme beim Laden eines PJAX Container in einem benutzerdefinierten modal ähnlich wie Bootstrap modal.

Das Ziel dieses Codes ist die pjax Container laden alle eingereichten Kommentare innerhalb der pjax ‚Listview s neu zu laden.

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

, die Teil einer Funktion namens extractContainer ist:

Die anfängliche reload wird von jQuery aber gefolgt von einer Ausnahme in jquery.pjax.js angehoben ausgeführt

:

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)) 
    } 

Meine Ansicht des 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() ?> 

Meine Ansicht ist Jquery Aufruf zum Neuladen der Pja x 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

Dank @Beowultenator wurde ich auf die richtige Spur gesetzt, um dieses Problem zu beheben.

Anscheinend ist der pjax Modul zurück die URL der tatsächlichen page HINTER der modal/frontend/index statt /frontend/post/detail?id=id. Routing der modal ‚s pjax auf die richtige URL war recht einfach:

$('#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: Der Nachteil ist, dass das Skript INSIDE der pjax sein muss, damit der Code in Betrieb ist. Der Nachteil davon ist, dass ich den Klick jedes Mal neu zu initialisieren haben, da sonst die $('#submit-comment').on('click',function()); wird so hier kumulativ klicken, wie das beheben:

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