Yii2 get value from Gridview button using javascript

Question

I am new to Yii2 Framework , I have developed a module that will upload and display file uploaded from server using Yii2 advance framework. I completed the function for uploading the file , However. In my other function that need to display the file like pdf file to jquery ui dialog.My problem is I cannot get the value of the button when I click the button to display the pdf file uploaded. Thank you guys in advanced.

// Here is Gridview code in Index where my button Exist.
 <?= DynaGrid::widget([
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // 'ntraining_id',
        'ctraining_description',
        //'dtraining_datefrom',
         [
            'attribute'=>'dtraining_datefrom',
            'filterType'=>GridView::FILTER_DATE,
            'format'=>'raw',
            'filterWidgetOptions'=>[
                'pluginOptions'=>['format'=>'yyyy-mm-dd']
            ],
         ],
       // 'dtraining_dateto',
         [
         'attribute'=>'dtraining_dateto',
         'filterType'=>GridView::FILTER_DATE,
         'format'=>'raw',
         'filterWidgetOptions'=>[
          'pluginOptions'=>['format'=>'yyyy-mm-dd']
         ],
         ],
        'ctraining_numberhours',
        'ctraining_type',
        'ctraining_conducted',
        //'ctraining_attachment',

        [
        'attribute'=>'ctraining_attachment',
        'format' => 'raw',
        'label' => 'View Profile',
        'value' => function ($model){

                    return  Html::a(Yii::t('app', ' {modelClass}', [
                    'modelClass' => $model->ntraining_id,
                    'header' => 'raw',

                    ]), ['TblTrainingController/Listeaffecter'], ['class' => 'btn btn-success opener', 'id'=>'opener', 'data' => $model->ntraining_id,]);   

            },
        ],

        //'id',

        ['class' => 'yii\grid\ActionColumn'],
        ],
        'storage'=>DynaGrid::TYPE_COOKIE,
        'theme'=>'panel-info',
        'gridOptions'=>[
            'dataProvider' => $dataProvider,
            'id' => 'grid',
            'filterModel' => $searchModel,
            'panel'=>['heading'=>'<h3 class="panel-title">LEARNING AND DEVELOPMENT (L&D) INTERVENTIONS/TRAINING PROGRAMS ATTENDED</h3>'],
        ],
    'options'=>['id'=>'dynagrid-1'], // a unique identifier is important
]); ?>

Here is javascript Code

$this->registerJs("$(function(){

    $('.opener').click(function(e) {

            alert(e.data);
           //alert($(this).val());
            e.preventDefault();
            ViewPDfAttach();

    });

});");

Here is the image of my interface that display null when I click the button from gridview

Answer 1

Call to alert(e.data); means you want to get the value of variable e from function callback.

While calling alert($(this).val()); means you want to get the value from value attribute in the element, but there's no value attribute found in yours.

Based on your element structure, if you want to get the value from data attribute, you can do this:

alert($(this).attr('data'));

If your element has structure like <a data-hello="Hello there">Click me</a>, you can alert with this one:

alert($(this).data('hello'));

See here for more informations:

• JQuery .data()
• JQuery .attr()