kartik-v / yii2-widget-select2

Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets).
http://demos.krajee.com/widget-details/select2
Other
323 stars 145 forks source link

When I select an element from select2, it does nothing. #365

Closed LuisEduardoGarcia51981 closed 4 months ago

LuisEduardoGarcia51981 commented 6 months ago

When I select an element from select2, it does nothing.

Here is the code for _columns and index:

Columns.php: <?php use yii\helpers\Url; use yii\helpers\Html; use app\models\Mjg_aux_tipo_configuracion; use kartik\grid\DataColumn; use kartik\grid\ActionColumn; use kartik\grid\GridView; use yii\helpers\ArrayHelper; use kartik\date\DatePicker; use yii\app;

date_default_timezone_set('America/Argentina/Buenos_Aires');

return [ / [ 'class' => 'kartik\grid\CheckboxColumn', 'width' => '20px', ],/

[
    'class' => 'kartik\grid\SerialColumn',
    'width' => '30px',
],
[
    'class'=>'kartik\grid\DataColumn',
    'attribute'=>'idtipoconfiguracion',
    'width' => '5%',
    'label' => 'Id',
    'filter' => true,
],        
[       
    'attribute'=>'descripcion',
    'label'=>'Descripción',
    'filter' => true,
],            
[    'class' => '\kartik\grid\DataColumn',        
    'attribute' => 'activo',
    'width' => '7%',        
    'value' => function ($model) {
        //$valor_resp=$model->activo ? "Si" : "No";   
        //$cad_final= $model->activo ? ' bg-info/20 text-info">'.$valor_resp : ' bg-danger/20 text-danger">'.$valor_resp;
        return $model->activo ? '<svg class="svg-inline--fa fa-check-circle fa-w-16 text-success" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>': ' <svg class="svg-inline--fa fa-times-circle fa-w-16 text-danger" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>';                       
        //return '<span class="inline-block items-center rounded text-xs justify-center px-1.5 py-0.5'.$cad_final.'</span>';           
        //return $micadena;
    },
    //'filterType' => GridView::FILTER_SELECT2,
    'filterType' =>GridView::FILTER_SELECT2,
    'filter' => array('0'=>"No",'1'=>"Si"),
    'filterWidgetOptions' => [
    'pluginOptions' => ['allowClear' => true],
        ],
        'filterInputOptions' => ['placeholder' => '...' ],          
    'format' => 'raw',     

], 

[
//'class' => ActionColumn::className(), 'class' => 'kartik\grid\ActionColumn', 'template' => '{view} {update} {delete}' , 'dropdown' => false,
'vAlign'=>'middle',
'urlCreator' => function ($action, $model, $key, $index) { return Url::to([$action, 'idtipoconfiguracion' => $key]); }, 'viewOptions'=>['role'=>'modal-remote','title'=>'Ver tipo de configuración','data-toggle'=>'tooltip'], 'updateOptions'=>['role'=>'modal-remote','title'=>'Actualizar tipo de configuración', 'data-toggle'=>'tooltip'], 'deleteOptions'=>['role'=>'modal-remote','title'=>'Borrar tipo de configuración', 'data-confirm'=>false, 'data-method'=>false,// for overide yii data api 'data-request-method'=>'post', 'data-toggle'=>'tooltip', 'data-confirm-title'=>'Eliminar Registro?', 'data-confirm-message'=>'Esta usted seguro de eliminar este registro?'], ],
];

INDEX.PHP: <?php

use app\models\Mjg_aux_tipo_configuracion; use yii\helpers\Html; use yii\helpers\Url; use yii\grid\ActionColumn; use kartik\grid\GridView; use yii\bootstrap5\Modal; use yii\helpers\ArrayHelper; use yii\web\View; use johnitvn\ajaxcrud\CrudAsset; use johnitvn\ajaxcrud\BulkButtonWidget; use yii\widgets\ActiveForm; / @var $this yii\web\View / use yii\web\JqueryAsset; use yii\widgets\Pjax; / @var yii\web\View $this */ /* @var app\models\Mjg_aux_tipo_configuracionSearch $searchModel / / @var yii\data\ActiveDataProvider $dataProvider */

CrudAsset::register($this); $this->title = 'Tipos de Configuración'; $this->params['breadcrumbs'][] = $this->title;

?>

<?php $form = ActiveForm::begin(); ?>

render('_search', ['model' => $searchModel]); ?>

title) ?>

registerJsFile('https://code.jquery.com/jquery-3.4.1.min.js'); $this->registerJsFile('https://use.fontawesome.com/releases/v5.3.1/js/all.js'); $customCss = <<< CSS .kartik-grid .kv-panel-before .summary { text-align: right; } CSS; // Registrando el CSS personalizado $this->registerCss($customCss); ?>
'crud-datatable', 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'pjax'=>true, 'headerContainer' => ['style' => 'top:50px'], // offset from top 'floatHeader' => true, // table header floats when you scroll 'floatPageSummary' => false, // table page summary floats when you scroll 'floatFooter' => false, // disable floating of table footer 'columns' => require(__DIR__.'/_columns.php'), //'headerRowOptions' => ['style' => 'background-color: #f0f0f0; color: #333; font-size: 16px;'], //'containerOptions' => ['style' => 'border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f9f9f9;'], 'toolbar'=> [ ['content'=> Html::a('', ['create'], ['role'=>'modal-remote','title'=> 'Crear nuevo tipo de configuración','class'=>'btn btn-default']). Html::a('', [''], ['data-pjax'=>1, 'class'=>'btn btn-default', 'title'=>'Resetear Grilla']). '{export}' ], ], //'toolbarContainerOptions' => ['style' => 'background-color: #f0f0f0; padding: 10px; border-bottom: 1px solid #ccc;'], 'toolbarContainerOptions' => [ //'class' => 'kv-grid-toolbar', // Clase CSS del contenedor del toolbar // Puedes añadir otros estilos de CSS directamente aquí 'style' => 'margin-bottom: 5px;margin-top: 5px; overflow: auto;float: right !important;', // Estilos adicionales ], 'headerRowOptions' => ['class' => 'kartik-sheet-style'], 'striped' => true, 'condensed' => true, 'responsive' => true, 'showPageSummary' => false, 'export' => [ 'fontAwesome' => true ], 'panel' => [ 'type' => 'default', 'heading' =>'', 'before'=>'', 'after'=>'
', 'footer' => false, ], ])?>
registerJs( "$('#ajaxCrudModal').on('hidden.bs.modal', function() { location.reload(); })" ); ?>
"ajaxCrudModal", 'options' => [ 'tabindex' => false // important for Select2 to work properly ], 'size' => Modal::SIZE_LARGE, 'clientOptions' => [ 'backdrop' => 'static' ], "footer"=>"",// always need it for jquery plugin ])?> Could it be that it doesn't load the js and css files correctly? How do I do then? Here is a screenshot of what it looks like: ![pantalla1](https://github.com/kartik-v/yii2-widget-select2/assets/70907885/5ad04c00-2584-4b23-9fc1-621f17b35ef0) console screenshot: ![image](https://github.com/kartik-v/yii2-widget-select2/assets/70907885/0320491f-b04f-4a3a-9b62-e4c99fd07db5)
kartik-v commented 4 months ago

Since you are rendering by PJAX - the plugin needs to be reinitialized whenever there is pjax refresh. All Krajee widgets including Select2 provide a configuration option called pjaxContainerId. Read about it in the code here.

You need to set pjaxContainerId to the id matching your pjax container. So you must also in your code above set:

Pjax::begin(['options' => ['id => 'my-pjax-container']]);
/* other code */
Select2::widget([
   'pjaxContainerId' => 'my-pjax-container'
   //other options
]);
Pjax::end();