Yii2 upload image from modal issue - yii2

Question

I'm using yii2 bootstrap modal for uploading images, the issue is I need to double click on Create button then form submit works otherwise it don't work on single click.
On double click image is uploading and form data also saved to database.
Is this issue with my code?
Here is code:
//Form
<?php Pjax::begin(['id' => 'banner-form']) ?>
<?php $form = ActiveForm::begin([
'id' => 'banner-form',
'options' => [
'data-pjax' => true,
'enctype' => 'multipart/form-data'
]
]);
?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'banner')
->fileInput([
"accept"=>"image/*"
])
?>
<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
//Model
[['banner'], 'file', 'skipOnEmpty' => false,
'extensions' => ['jpg', 'jpeg', 'png', 'gif']
]
//index.php
<p>
<?= Html::a(Yii::t('app', 'Create Banner'), null, ['class' => 'btn btn-success', 'id'=>'createBannerButton',
'value'=>Url::to(['/banner/create'])]) ?>
</p>
<?php Pjax::begin(['id' => 'banner-index']) ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
....
]); ?>
<?php Pjax::end(); ?>
//Controller
use yii\web\UploadedFile;
class BannerController extends Controller
{
...
public function actionCreate()
{
$model = new Banner();
if ($model->load(Yii::$app->request->post())){
$file = UploadedFile::getInstance($model, 'banner');
if (!empty($file))
$model->banner = $file;
if($model->save()){
if (!empty($file))
$file->saveAs( Yii::getAlias('#root') .'/uploads/' . $file);
return $this->redirect(['view', 'id' => $model->id]);
}
}
else if (Yii::$app->request->isAjax) {
return $this->renderAjax('create', [
'model' => $model,
]);
}
else {
return $this->render('create', [
'model' => $model,
]);
}
}
...
}
//layouts/main.php
<?php
Modal::begin([
'header' => '',
'id' => 'modal',
'size' => 'modal-medium', //medium
'clientOptions' => ['backdrop' => 'static', 'keyboard' => false]
]);
echo "<div id='modalContentBackend'>
<div class='col-lg'>
<img src='/images/loading.gif' width='280' height='210' alt='loading...'>
</div>
</di>";
Modal::end();
?>
<?php $this->endBody() ?>
//backend/web/js/custom.js
$(function(){
$("#createBannerButton").click(function(){
$("#modal").modal('show')
.find('#modalContentBackend')
.load($(this).attr('value'));
});
});
//backend/assets/AppAsset
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
'js/custom.js'
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}

Answer 1

I got the issue, I'm including Pjax::begin() in index.php and _form.php, I have removed Pjax::begin() from _form.php and now it is working fine.