Pjax Request is executed 2 times one aborted and then execute - yii2

Question

I am facing a problem with PJAX. When Submitting ActiveForm through Pjax ,action is executing Twice .
One is aborted and another is success.
Meanwhile there is 2 new models inserted in database since former is doing insertion and aborted.
My Controller code is
public function actionCreate()
{
$model = new Products();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return "Success";
} else {
return $this->renderAjax('_form', [
'model' => $model,
]);
}
}
and my _form.php is
<?php
$this->registerJs('
$.pjax.defaults.timeout = 5000;
$("#product-form-pjax").on("pjax:success", function(data, status, xhr, options) {
if(options.responseText == "Success"){
$.pjax.reload({container: "#pjax-gridview", timeout: 2000});
$("#activity-modal").modal("hide");
}
});
');
?>
<div class="products-form">
<?php Pjax::begin(['id' => 'product-form-pjax', 'enablePushState' => FALSE]) ?>
<?php $form = ActiveForm::begin([
'id' => 'crud-model-form',
'action' => ['product/create'],
'options' => [
'data-pjax' => true,
]
]);
?>
<?= $form->field($model, 'name') ?>
<?= $form->field($model, 'image') ?>
<?= $form->field($model, 'brand')->dropDownList(ArrayHelper::map(Brands::find()->all(),'id','name')) ?>
<?= $form->field($model, 'category')->dropDownList(ArrayHelper::map(Categories::find()->all(),'id','name'),['select' => ''])?>
<?= $form->field($model, 'lot') ?>
<?= $form->field($model, 'prize') ?>
<?= $form->field($model, 'condition') ?>
<?= $form->field($model, 'extra_condition') ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php Pjax::end() ?>
</div>
I am creating this model through bootstrap model with Pjax enabled on GridView
So why my action is aborted and then execute.
I have already changes PJAX timeout option in it

Answer 1

I'm not 100% sure on this, as I would need to test your code directly to make sure this works. But I think the pjax:success event gets fired twice. I remember looking into it a while back and it seemed it was intended behavior for the success event to fire twice.
When I try to do something similar to what you are doing, I've used pjax:end instead of pjax:success. So you may want to try that and see if it helps.
Additionally, it may help to make sure your javascript is being called once the document is ready. So updating your script as below may also help. You can learn more about customizing where scripts are added in the Yii2 Docs http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html
$this->registerJs('
$.pjax.defaults.timeout = 5000;
$("#product-form-pjax").on("pjax:end", function(data, status, xhr, options) {
if(options.responseText == "Success"){
$.pjax.reload({container: "#pjax-gridview", timeout: 2000});
$("#activity-modal").modal("hide");
}
});
', $this::POS_READY);

Answer 2

I had this poblem, it is just a timeout problem. The default timeout of Pjax is too short.