Mostrando entradas con la etiqueta Popup. Mostrar todas las entradas
Mostrando entradas con la etiqueta Popup. Mostrar todas las entradas

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