domingo, 17 de julio de 2016

Yii2 Formulario Modal via Ajax (create/update/view)

Paso 1) En el archivo index.php de la vista
Views/cliente/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
68
<?php
use yii\bootstrap\Modal;
use yii\helpers\Url;
?>

 <h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
      
     // comenta este link
     <?= // Html::a('Create cliente', ['create'], ['class' => 'btn btn-success']) ?>
       
     // Agregar este boton  
     <?= Html::button('Create cliente', 
        ['value'=>Url::to(['cliente/create']),
                        'class' => 'btn btn-success','id'=>'modalButton']) ?>
    
    


//  Antes del GridView agregar esta declaracion modal

<?php
  Modal::begin([
     'header' =>'<h4>Ficha</h4>',
     'id'     =>'modal',
     'size'   =>'modal-lg',
     'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE]
     ]);
  echo "<div id="modalContent"> </div>";
  Modal::end();
?>

<?php

GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
   
 ...

// ['class' => 'yii\grid\ActionColumn'],  

  // personalizamos la acciones del GridView
  [
   'class' => 'yii\grid\ActionColumn',
   'contentOptions' => ['style' => 'width: 8.7%'],
             //'visible'=> Yii::$app->user->isGuest ? false : true,
             'buttons'=>[
                      'view'=>function ($url, $model) {
                          return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', 
                                       ['value'=>Url::to(['cliente/view', 'id'=>$model->id]), 
                                        'class' => 'btn btn-default btn-xs custom_button'
                                       ]);
                      },
                      'update'=>function ($url, $model) {
                          return Html::button('<span class="glyphicon glyphicon-pencil"></span>', 
                                       ['value'=>Url::to(['cliente/update', 'id'=>$model->id]),
                                        'class' => 'btn btn-default btn-xs custom_button'
                                        ]);
                      },
                  ],
            ],  // fin ActionColumn

       ],
    ]);
    ?>

Paso 2) assets/AppAsset.php 

1
2
3
  public $js = [
     'js/formmodal.js',
   ];
Paso 3) web\js\formmodal.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
 
 //alert("jquery");
 
    $('#modalButton').click(function(){
       $('#modal').modal('show')
                  .find('#modalContent')
                  .load($(this).attr('value'));
        document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
    });


    $('.custom_button').click(function(){
        $('#modal').modal('show')
                   .find('#modalContent')
                   .load($(this).attr('value'));
         //dynamiclly set the header for the modal
          document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';

    });


});


Paso 4) En el Controlador ClienteController.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
<?php

public function actionView($id)
    {
        // remplazar render por renderAjax
        return $this->renderAjax('view', [
            'model' => $this->findModel($id),
        ]);
    }
public function actionCreate()
    {
        $model = new Cliente();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        } 
        elseif (Yii::$app->request->isAjax) {
            return $this->renderAjax('create', [
                        'model' => $model
            ]);
        } else {
            return $this->render('create', [
                        'model' => $model
            ]);
        }
    }

 public function actionUpdate($id)
    {
        $model = $this->findModel($id);

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        }
        elseif (Yii::$app->request->isAjax) {
            return $this->renderAjax('update', [
                        'model' => $model
            ]);
        } else {
            return $this->render('update', [
                        'model' => $model
            ]);
        }
    }

?>
CREATE
view modal yii2

UPDATE

create modal yii2



VIEW

update modal yii2

 Fuente de ayuda www.yiiframework.com
en 2 comentarios:
Etiquetas: , , , ,
Ubicación: Asunción, Paraguay
Suscribirse a: Comentarios (Atom)

python - método split()

  Cómo dividir cadena en subcadenas con  el method split()? En este ejemplo, le asigno a la variable varTP el bloque de información con el q...