Bootstrap Modal & Yii2 Search Form

Yii 2.0 General Discussions
1

Hello, i’m newbie on yii

i try to put search form on bootstrap modal, searching is running well, display what i want. but when i click Search / Reset the screen can not click anymore.

like stunted by black/gray background.

sorry for my awfull english.

here’s the code :


<?php


use yii\helpers\Html;

use yii\widgets\ActiveForm;

use kartik\grid\GridView;

use yii\widgets\Pjax;

use	yii\bootstrap\Modal;

/* @var $this yii\web\View */

/* @var $dataProvider yii\data\ActiveDataProvider */


$this->title = 'Daftar SKPD';

$this->params['breadcrumbs'][] = $this->title;

?>

<div class="refskpd-index">

<?php Pjax::begin(); ?>

	<?= Html::beginForm(['index'], 'post', ['data-pjax' => '', 'class' => 'form-inline']); ?


	<!-- Modal Bootstrap-->

	<div id="myModal" class="modal fade modal-primary" role="dialog">

	  <div class="modal-dialog">

		<!-- Modal content-->

		<div class="modal-content">

		  <div class="modal-header">

			<button type="button" class="close" data-dismiss="modal">&times;</button>

			<h4 class="modal-title"><i class="fa fa-search"></i> Form Pencarian SKPD</h4>

		  </div>

		  <div class="modal-body">

			<p>Masih belum berfungsi. Saat di Klik Cari / Reset hasil ketutup <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/biggrin.gif' class='bbc_emoticon' alt=':D' /></p>

			<?= Html::input('text', 'kdskpd', Yii::$app->request->post('kdskpd'), ['class' => 'form-control','style'=>'width:100%', 'placeholder' => 'Masukkan Nama / Kode SKPD ...']) ?>

			<div class="spasi15"></div>

			<div class="form-group">

			<?= Html::submitButton('<i class="fa fa-search"></i>&nbsp; Seacrh', ['class' => 'btn btn-success ']) ?>

			<?= Html::a('<i class="fa fa-close"></i>&nbsp; Reset', ['index'], ['class' => 'btn btn-danger ' ]) ?>

            </div>

		  </div>

		  <div class="modal-footer">

			<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->

		  </div>

		</div>


	  </div>

	</div>

	<?= Html::endForm() ?>

	

	<div class="spasi15"></div>

    <?= Html::a('<i class="fa fa-plus"></i>&nbsp; Tambah Daftar SKPD', ['create'], ['class' => 'btn btn-success']) ?>

	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="fa fa-search"></i> Cari Daftar SKPD (Alt)</button>

	<div class="spasi15"></div>

	

    <?= GridView::widget([

        'dataProvider' => $dataProvider,

         'pjax'=>true,

            'export'=>false,

        'toolbar'=> [

            '{export}',

        ],

        'columns' => [

                ['class' => 'yii\grid\SerialColumn'],

                ['attribute' => 'kdskpd', 'format' => 'text', 'label' => 'Kode','headerOptions'=>['width'=>'15%']],

                ['attribute' => 'uraian', 'format' => 'text', 'label' => 'Nama SKPD','headerOptions'=>['width'=>'75%']],


//                 'nama:text:Nama',

            

      

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

                 'contentOptions'=>['style'=>'width: 10%;'],

                   'template'=>'{update}{delete}',

            'buttons'=>[

             

                  'update'=>function($url,$model){

                    return Html::a('<span class="glyphicon glyphicon-edit"></span>',$url,[

                       'class'=>'btn btn-block btn-primary btn-flat sejajar',

                       'style'=>'width : 50%',

                       /* 'data'=>[

                            'confirm'=>'Apakah Anda Yakin Ingin Hapus Item ini ?',

                            'method'=>'post',

                        ]

                        * 

                        */

                    ]);

                },

                

                'delete'=>function($url,$model){

                    return Html::a('<span class="glyphicon glyphicon-trash"></span>',$url,[

                       'class'=>'btn btn-block btn-danger btn-flat sejajar',

                      'style'=>'width : 50%',

                        'data'=>[

                            'confirm'=>'Apakah Anda Yakin Ingin Hapus Item ini ?',

                            'method'=>'post',

                        ]

                    ]);

                }

            ]

                ],

         

        ],

    ]); ?>

    

<?php Pjax::end(); ?>

</div>
2

[color="#006400"]/* Moved from "1.1" to "2.0" */[/color]

I’m not sure, but probably you have to exclude the popup from the pjax area. You can trigger the pjax from outside by specifying “formSelector”.

http://www.yiiframework.com/doc-2.0/yii-widgets-pjax.html#$formSelector-detail

3

Try process your modal buttons




<?= Html::submitButton('<i class="fa fa-search"></i>&nbsp; Seacrh', ['class' => 'btn btn-success ']) ?>

<?= Html::a('<i class="fa fa-close"></i>&nbsp; Reset', ['index'], ['class' => 'btn btn-danger ' ]) ?>

with ajax.




$('#myModal button[type="submit"]').on('click', function(e){

e.preventDefault();

//your ajax request

});

and if you add to Reset button ‘data-dismiss’=>‘modal’, it will close your modal window.

Also you can use Yii2 for building Modal like this:




Modal::begin([

    "id"=>"modal",

    'header' => '<h4 class="modal-title">Are you sure?</h4>',

    "footer"=>

        Html::a('Close', ['#'],

        ['title' => 'Close', 'class' => 'btn btn-default pull-left', 'data-dismiss'=>"modal"]) .

        Html::a('ОК', Url::to('photos-delete'),

            ['title' => 'Delete', 'class' => 'btn btn-primary', 'id' => 'delete-confirm-btn']),

]);


echo 'Do this!';


Modal::end();