Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax
Kita akan coba untuk melakukan submit form dengan Ajax. 1. Modifikasi _form.php milik view branches dengan menambahkan kode jQuery di bagian bawah :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use yii\helpers\ArrayHelper; use backend\models\Companies; use kartik\select2\Select2; /* @var $this yii\web\View */ /* @var $model backend\models\Branches */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="branches-form"> <?php $form = ActiveForm::begin(['id'=>$model->formName()]); ?> <?= $form->field($model, 'companies_company_id')->widget(Select2::classname(), [ 'data' => ArrayHelper::map(Companies::find()->all(),'company_id','company_name'), 'language' => 'en', 'options' => ['placeholder' => 'Pilih Company'], 'pluginOptions' => [ 'allowClear' => true ], ]); ?> <?= $form->field($model, 'branch_name')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'branch_address')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'branch_status')->dropDownList([ 'active' => 'Active', 'inactive' => 'Inactive', ], ['prompt' => 'Status']) ?> <div class="form-group"> <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> </div> <?php $script = <<< JS $('form#{$model->formName()}')on('beforeSubmit',function(e) { var \$form = $(this); $.post( \$form.attr("action"), //serialize Yii2 form \$form.serialize() ) .done(function(result){ if(result == 1) { $(\$form).trigger("reset"); $.pjax.reload({container:'#branchesGrid'}); }else { $("#message").html(result); } }).fail(function(){ console.log("server error"); }); return false; }); JS; $this->registerJs($script); |
2. Modifikasi. index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?php use yii\helpers\Html; use yii\grid\GridView; use yii\bootstrap\Modal; use yii\helpers\Url; use yii\widgets\Pjax; /* @var $this yii\web\View */ /* @var $searchModel backend\models\BranchesSearch */ /* @var $dataProvider yii\data\ActiveDataProvider */ $this->title = 'Branches'; $this->params['breadcrumbs'][] = $this->title; ?> <div class="branches-index"> <h1><?= Html::encode($this->title) ?></h1> <?php // echo $this->render('_search', ['model' => $searchModel]); ?> <p> <?= Html::button('Create Branches', ['value'=>Url::to('index.php?r=branches/create'),'class' => 'btn btn-success','id'=>'modalButton']) ?> </p> <?php Modal::begin([ 'header'=>'<h4>Branches</h4>', 'id'=>'modal', 'size'=>'modal-lg', ]); echo "<div id='modalContent'></div>"; Modal::end(); ?> <?php Pjax::begin(['id'=>'branchesGrid']); ?> <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'rowOptions' => function($model){ if($model->branch_status == 'active'){ return ['class'=>'success']; }else{ return ['class'=>'danger']; } }, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], [ 'attribute'=>'companies_company_id', 'value'=>'companiesCompany.company_name', ], //'branch_id', 'branch_name', 'branch_address', 'branch_created_date', 'branch_status', ['class' => 'yii\grid\ActionColumn'], ], ]); ?> <?php Pjax::end(); ?> </div> |
3. Modifikasi actionCreate pada BranchesController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public function actionCreate() { if(Yii::$app->user->can('tambah-branch')) { $model = new Branches(); if ($model->load(Yii::$app->request->post())) { $model->branch_created_date = date('Y-m-d h:m:s'); if($model->save()) { echo 1; }else { echo 0; } } else { return $this->renderAjax('create', [ 'model' => $model, ]); } }else { throw new ForbiddenHttpException; } } |
Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya Read more about Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax[…]