Hello. On my site I have modals, which load content by ajax. I noticed that when I open and close comment form (wrapped in pjax) seven times, then after submit there is seven requests. It results in duplicated comments, even though first six are cancelled:
I debugged code and the problem is that pjax is adding this line
jQuery(document).on('submit', "#add_comment form[data-pjax]", function (event) {jQuery.pjax.submit(event, '#add_comment', {"push":false,"replace":false,"timeout":5000,"scrollTo":false});});
, so after few executions, submit button fire few functions on click. What I can do to fix this?
Code:
controllers/SiteController.php:
public function actionIndex()
{
return $this->render('index');
}
public function actionCreate()
{
return $this->renderAjax('create');
}
views/layouts/main.php:
...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"></div></div></div>
...
views/index.php:
<?php use yii\helpers\Url; ?>
<a href="<?= Url::to(['comment/create']) ?>" data-toggle="modal" data-target="#myModal">Add comment</a>
views/create.php:
<?php use yii\bootstrap\ActiveForm;
use yii\helpers\Html; ?>
<div class="container-fluid">
<?php yii\widgets\Pjax::begin(['id' => 'add_comment', 'enablePushState'=>false, 'timeout' => 5000]) ?>
<?php $form = ActiveForm::begin(['id' => 'create-comment-form', 'options' => ['data-pjax' => true ]]); ?>
<?= Html::submitButton('OK') ?>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>
Steps to reproduce:
-
Open and close modal few times by clicking "Add comment" and Escape key.
-
Open modal and submit form
Edit: I found workaround:
Add uniqid() in pjax id and problem is solved.