[SOLVED] Pjax in remote modal cause multiple request

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:

  1. Open and close modal few times by clicking "Add comment" and Escape key.

  2. Open modal and submit form

Edit: I found workaround:

Add uniqid() in pjax id and problem is solved.