PHP：如何根据gridview中单击按钮的行ID在模式框中显示数据？

Question

I've a Yii2-basic application that has view of index.php that contain a kartik GridView. There is an action column that contain view button that will redirect the page to view of view.php if clicked.

If the view button clicked, page will redirect to view.php and show data based on id,

For example from image above, that table contain two button in view column. If the first(top) button clicked, it will show data base on id from id column (left side of table), so it will show data that has id = 1. And I've successfully create this action.

But I need to show data in modal box. So I use yii\bootstrap\Modal. And I've succesfully show the data in modal box. For the first clicked, it will popup modal box that contain data based on id, but for the next click button it will also show the data based on id that got from the first clicked button.

For example from picture above: For the first time I click the button from the second row (id = 2) and then popup a modal box that contain data that has id=2, and then I click the button from the first row(id = 1) and it will also popup modalbox that contain data that has id = 2.

Here's my code from index.php:

<?php

use yii\helpers\Html;
use kartik\grid\GridView;
use yii\widgets\Pjax;
use yii\helpers\Url;
use yii\bootstrap\Modal;

<div class="students-index">
<?=
GridView::widget([
    'dataProvider' => $dataProvider,
    'tableOptions' => ['class' => 'table table-hover'],
    'columns' => [
        [
            'label' => 'id',
            'value' => function($data) {
                return $data->id;
            }
        ],
        [
            'label' => 'Name',
            'value' => function($data) {
                return $data->name;
            }
        ],
        [
            'label' => 'Birthdate',
            'value' => function($data) {
                return $data->Birthdate;
            }
        ],
        [
            'label' => 'Sex',
            'value' => function($data) {
                return $data->Sex;
            }
        ],
        [
            'class' => 'yii\grid\ActionColumn',
            'header' => 'View',
            'template' => '{view}',
            'buttons' => [
                'view' => function ($url, $model) {
            $icon = '<span class="glyphicon glyphicon-eye-open"></span>';
            return Html::a($icon, $url, [
                        'title' => Yii::t('app', 'View'),
                        'data-toggle' => "modal",
                        'data-target' => "#myModal",
            ]);
        },
            ],
            'urlCreator' => function ($action, $model, $key, $index) {
        if ($action === 'view') {
            $url = Url::toRoute(['/school/students/view', 'id' => $model->faktur_out_id], ['data-method' => 'post',]);
            return $url;
        }
    }
        ]
    ],
]);
?>

</div>

<?php
Modal::begin([
'id' => 'myModal',
]);
 Pjax::begin([
     'id'=>'pjax-modal','timeout'=>false,
     'enablePushState'=>false,
     'enableReplaceState'=>false,
 ]); 

 Pjax::end();

 Modal::end();
?>

<?php
$this->registerJs("
$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var href = button.attr('href') 
    $.pjax.reload('#pjax-modal', {
    'url' => href,
    });
"); ?>

How do I can show the data in modal box based on id?

But actually I didn't understand $this->registerJs("......") yet. Maybe anyone can explain about it in simple language.

Any help will be appreciated, thanks.

Answer 1

$this->registerJs(" "); is simply a function in the Yii framework that allows you to write the javascript in between the " ".

Try this:

<?php
Modal::begin([
'id' => 'myModal',
]);
 Pjax::begin([
     'id'=>'myModal','timeout'=>false,
     'enablePushState'=>false,
     'enableReplaceState'=>false,
 ]); 

 Pjax::end();

 Modal::end();
 ?>

<?php
$this->registerJs("
$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var href = button.attr('href') 
    $.pjax.reload('#myModal', {
    'url' => href,
    });
"); ?>