jquery tutorial Archives

Di tutorial ini kita akan melihat contoh penggunaan Ajax dan implementasinya pada jQuery. Siapkan file index.html dan ajax.js index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="main">
		
	</div>

	<button id="btn_1">Load Messages</button>


	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/ajax.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<button id="btn_1">Load Messages</button>

</body>

</html>

ajax.js

$(function(){
  $("button").on("click", function(){

  }
});

$(function(){

$("button").on("click", function(){

}

});

Kita akan mengambil data dari sebuah halaman web, dan menampilkannya pada div class=”main” yang berada di index.php 1. Method load(). Method load adalah cara yang paling sederhana untuk mengambil data dari URL. Contoh Read more about Tutorial jQuery 14 : Implementing AJAX dengan Method load()[…]

Kita akan coba untuk melakukan submit form dengan Ajax. 1. Modifikasi _form.php milik view branches dengan menambahkan kode jQuery di bagian bawah :

<?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);

<?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 */

<?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']) ?>

<?= 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

<?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>

<?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;

<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

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; 
        }
    }

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[…]

indocoder.com

Tag: jquery tutorial

Tutorial jQuery 15 : Implementing AJAX dengan Method $.ajax()

Tutorial jQuery 14 : Implementing AJAX dengan Method load()

Tutorial JQuery 13 : Ajax Overview

Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax

Tutorial JQuery 9 : CSS Selector