reloading pjax container after login user

[rahulk-k]

When i logged in via ajax & reloading the pjax container ($.pjax.reload({container:'#comment_cont'});) ,the comment box is visible .after we put comment in the box and submitting the comment by clicking comment button form is redirecting to

http://localhost/blog/comment/default/create?entity=e%C2%BC3%7D%C2%A1%C2%87%...

and getting json message {"status":"success"}

[ihorchepurnyi]

Hi, how i can reproduce your issue? Can you add your code here?

[rahulk-k]

im using this script when user clicked on login button

$('form#login-form').on('beforeSubmit',function(e){
var form=$(this);
$.post(form.attr('action'),form.serialize()).done(function(res) {
  if (res=='1'){
  $.pjax.reload({container:'#comment_cont'}); //this line for reloading pjax container
  $("#comment-form").removeClass('hide');
  $("#sl").hide();
  form.trigger('reset');
  }else{
  alert('Incorrect username or password.');
  }  
});
return false;
})

[ihorchepurnyi]

Why you reload the comments container after success login? If I understand correctly, the comments container just hided by css display:none property, or not?

[ihorchepurnyi]

I have reproduced your issue, now I will try to fix it

[ihorchepurnyi]

Please replace your js by the following code:

$('form#login-form').on('beforeSubmit',function(e){
var form=$(this);
$.post(form.attr('action'),form.serialize()).done(function(res) {
  if (res=='1') {
  // reload comment container
  var commentData = $("#comment-form").comment('data');
$.pjax.reload({container:'#comment_cont', timeout: 10000,
            scrollTo: false,
            url: window.location.href});
$("#comment-form").comment('reset', commentData);
  // end reload comment container
  $("#comment-form").removeClass('hide');
  $("#sl").hide();
  form.trigger('reset');
  }else{
  alert('Incorrect username or password.');
  }  
});
return false;
})

[rahulk-k]

I tried your code im getting error Uncaught TypeError: Cannot read property 'pjaxContainerId' of undefined on comment.js line no 61. im getting commentData is undefined on console.log

[ihorchepurnyi]

Can you add code of your view file here?

[rahulk-k]

post/view.php

 <?php echo \yii2mod\comments\widgets\Comment::widget([
                                'model' => $model,
                                'formId'=>'myform',
                                'pjaxContainerId'=>'comment_cont',
                               // 'relatedTo'=>'a',
                               // 'relatedTo' => 'User ' . \Yii::$app->user->identity->username . ' commented on the page ' . \yii\helpers\Url::current(), // for example
                                'maxLevel' => 2, // maximum comments level, level starts from 1, null - unlimited level. Defaults to `7`
                                'showDeletedComments' => true, // show deleted comments. Defaults to `false`.
                                'commentView' => '@app/views/comment/index'
                            ]); ?>

---------------------
site/login.php

<?php
$js=<<<JS
$('form#login-form').on('beforeSubmit',function(e){
var form=$(this);
$.post(form.attr('action'),form.serialize()).done(function(res) {
  if (res=='1') {
  // reload comment container
  var commentData = $("#myform").comment('data'); console.log(commentData);
$.pjax.reload({container:'#comment_cont', timeout: 10000,scrollTo: false,url: window.location.href});
$("#myform").comment('reset', commentData);
  // end reload comment container
  $("#myform").removeClass('hide');
  $("#sl").hide();
  form.trigger('reset');
  }else{
  alert('Incorrect username or password.');
  }  
});
return false;
})

JS;

$this->registerJs($js);
?>
------------------
comment/index.php

<?php Pjax::begin(['enablePushState' => false, 'timeout' => 20000, 'id' => $pjaxContainerId]); ?>
<div class="comment-list clearfix" id="comments">
    <h2><?php echo Yii::t('yii2mod.comments', "{0} Readers Commented", $commentModel->getCommentsCount($showDeletedComments ? false : true)); ?></h2>
    <?php if(Yii::$app->user->isGuest){ ?>
    <a href="#divAddComment" class="link-add-comment anchor" hidefocus="true" style="outline: none;">Join Discussion</a>
    <?php }else{
        echo Html::a("Logout (".Yii::$app->user->identity->username.")",['site/logout'],['class'=>"link-add-comment anchor logout-link",'hidefocus'=>"true",'style'=>"outline: none;"]);
    }?>
    <!-- Comments list -->
    <ol> <?php echo $this->render('_list', ['comments' => $comments, 'maxLevel' => $maxLevel]) ?>

    </ol>
    <?php if (!Yii::$app->user->isGuest): ?>
        <?php echo $this->render('_form', [
            'commentModel' => $commentModel,
            'encryptedEntity' => $encryptedEntity,
            'formId' => $formId
        ]); ?>
    <?php endif; ?>
</div>
<?php Pjax::end(); ?>

--------------------------
comment/_list.php

<?php if (!empty($comments)) : ?>
    <?php foreach ($comments as $comment) : ?>
        <li class="comment" id="comment-<?php echo $comment->id ?>" itemscope itemtype="http://schema.org/Comment">
            <div class="comment-body bb" data-comment-content-id="<?php echo $comment->id ?>">
                <div class="comment-avatar">
                    <div class="avatar">
                        <?php echo Html::img($comment->getAvatar(), ['alt' => $comment->getAuthorName()]); ?>
                    </div>
                </div>
                <div class="comment-text">
                    <div class="comment-author clearfix">
                        <a href="#" class="link-author" hidefocus="true" style="outline: none;"><?php echo $comment->getAuthorName(); ?></a>
                                <span class="comment-meta"><span class="comment-date"><?php echo $comment->getPostedDate(); ?></span>

                                    <?php if ($comment->isActive): ?>

                                        <?php if (Yii::$app->getUser()->can('admin')): ?> |
                                            <?php echo Html::a('<span class="glyphicon glyphicon-trash"></span> ' . Yii::t('yii2mod.comments', 'Delete'), '#', ['data' => ['action' => 'delete', 'url' => Url::to(['/comment/default/delete', 'id' => $comment->id]), 'comment-id' => $comment->id]]); ?>
                                        <?php endif; ?>
                                        <?php if (!Yii::$app->user->isGuest && ($comment->level < $maxLevel || is_null($maxLevel))): ?> |
                                            <?php echo Html::a("<span class='glyphicon glyphicon-share-alt'></span> " . Yii::t('yii2mod.comments', 'Reply'), '#', ['class' => 'link-reply anchor comment-reply','hidefocus'=>"true", 'style'=>"outline: none;", 'data' => ['action' => 'reply', 'comment-id' => $comment->id]]); ?>
                                        <?php endif; ?>

                                    <?php endif; ?>
                                </span>
                    </div>
                    <div class="comment-entry" itemprop="text">
                        <?php echo $comment->getContent(); ?>
                    </div>
                </div>
            </div>
            <?php if ($comment->hasChildren()): ?>
                <ul class="children">
                    <?php echo $this->render('_list', ['comments' => $comment->children, 'maxLevel' => $maxLevel]) ?>
                </ul>
            <?php endif; ?>

        </li>

    <?php endforeach; ?>
<?php endif; ?>
---------------------
comment/_form.php

<div class="comment-form-container">
    <?php $form = ActiveForm::begin([
        'options' => [
            'id' => $formId,
            'class' => 'comment-box '
        ],
        'action' => Url::to(['/comment/default/create', 'entity' => $encryptedEntity]),
        'validateOnChange' => false,
        'validateOnBlur' => false
    ]); ?>

    <?php echo $form->field($commentModel, 'content', ['template' => '{input}{error}'])->textarea(['placeholder' => Yii::t('yii2mod.comments', 'Add a comment...'), 'rows' => 4, 'data' => ['comment' => 'content']]) ?>
    <?php echo $form->field($commentModel, 'parentId', ['template' => '{input}'])->hiddenInput(['data' => ['comment' => 'parent-id']]); ?>
    <div class="comment-box-partial">
        <div class="button-container show">
            <?php echo Html::a(Yii::t('yii2mod.comments', 'Click here to cancel reply.'), '#', ['id' => 'cancel-reply', 'class' => 'pull-right', 'data' => ['action' => 'cancel-reply']]); ?>
            <?php echo Html::submitButton(Yii::t('yii2mod.comments', 'Comment'), ['class' => 'btn btn-primary comment-submit']); ?>
        </div>
    </div>
    <?php $form->end(); ?>
    <div class="clearfix"></div>
</div>

[ihorchepurnyi]

Hi, try the following code:

$('form#login-form').on('beforeSubmit',function(e){
var form=$(this);
$.post(form.attr('action'),form.serialize()).done(function(res) {
  if (res=='1') {
  // reload container
  $.pjax.reload({container:'#comment_cont', timeout: 10000,
            scrollTo: false,
            url: window.location.href});
 // reinit comment plugin with pjaxContainerId param - Important!
  $("#comment-form").comment('init', {pjaxContainerId: '#comment_cont'});
  $("#comment-form").removeClass('hide');
  $("#sl").hide();
  form.trigger('reset');
  }else{
  alert('Incorrect username or password.');
  }  
});
return false;
})

[ihorchepurnyi]

1) Reload pjax container:

$.pjax.reload({
    container: '#comment_cont',
    timeout: 10000,
    scrollTo: false,
    url: window.location.href
});

2) Reinit comment plugin with pjaxContainerId option:

$("#comment-form").comment('init', {
    pjaxContainerId: '#comment_cont'
});

[rahulk-k]

Hi, that's not working again.

[ihorchepurnyi]

Do you replace in this code the id of comment form on your own ?

$("#comment-form").comment('init', {
    pjaxContainerId: '#comment_cont'
});

[rahulk-k]

yes i did

  $("#myform").comment('init', {pjaxContainerId: '#comment_cont'});
//and
$.pjax.reload({container:'#comment_cont', timeout: 10000,scrollTo: false,url: window.location.href});

[ihorchepurnyi]

Hm, above code works for me. Today I'm trying to reproduce your issue. I create basic login form with ajax support and after the user has been authorized in the chrome console firstly I reloads the pjax container and then I'm resetting the comment form plugin. After this steps comment form sends properly.

[ihorchepurnyi]

@morontt any ideas about this issue?

[morontt]

@rahulk-k We can see this behavior on live?

[ihorchepurnyi]

@morontt look https://github.com/yii2mod/yii2-comments/issues/28#issuecomment-257919656

[ihorchepurnyi]

After submit the form we get the following error :

Bad Request (#400)

Missing required parameters: entity

[ihorchepurnyi]

Probably when you override the widget views files you missing some url params

[ihorchepurnyi]

We don't have this error on our environments

[rahulk-k]

please check my code again on live server . i made some changes in the above mentioned code.

[ihorchepurnyi]

ok, I think this code does not working because pjax container reloaded after this code.

$('#myform').comment('data');

Please try the following code

$.pjax.reload({
    container: '#comment_cont',
    timeout: 10000,
    scrollTo: false,
    url: window.location.href
}).done(function() {
    $("#myform").comment('init', {
        pjaxContainerId: '#comment_cont'
    });
});

[ihorchepurnyi]

This code works for me

[ihorchepurnyi]

We should wait until pjax request loads the html(comment form, comment.js, etc) and only after this we should reinit the comment form.

[rahulk-k]

yes it's working first time. when we submit comment again, it is redirecting.

[ihorchepurnyi]

it's works for me without any redirects on my environment. At this time I don't have any ideas. Maybe you can try to use basic configuration for comment widget, without overriding view files. Something like this:

<?php echo \yii2mod\comments\widgets\Comment::widget([
    'model' => $model,
    'maxLevel' => 2
]); ?>

[ihorchepurnyi]

Hi, for temporary solution please remove this line from your code

'formId'=>'myform',

If comment widget used default comment form id, this code is working

$.pjax.reload({
    container: '#comment_cont',
    timeout: 10000,
    scrollTo: false,
    url: window.location.href
}).done(function() {
    $("#comment-form").comment('init', {
        pjaxContainerId: '#comment_cont'
    });
});

[ihorchepurnyi]

Also this code is working:

$.pjax({
    container: '#comment_cont',
}).done(function() {
    $("#myform").comment('init', {
        formSelector: '#myform',
        pjaxContainerId: '#comment_cont'
    });
});

You need additionally set the formSelector property in the init comment code.

[rahulk-k]

@igor-chepurnoi thank you very much.

[ihorchepurnyi]

You're welcome