CODEWITHSUNDEEP
yii2
dev-x
dev-x

Reputation: 899

Cannot use modal in panel in yii2

I want to use panel in yii2 project, so I download helpers from kartik-v. In the panel I want to make a button open a popup window or modal, but there is a problem. The modal/popup window working only in the first panel, but when I click button in the second panel, third panel, etc.. nothing happen. What's the problem?

This is the code:

<?php
    foreach ($dataProvider->models as $myKandidat)
    {   
        echo '<div class="col-md-4">'
            . Html::panel([
                'body' => '<div class="panel-body ">'
                            . '<div class="row">'
                                . '<div class="col-md-6"><center>'
                                    . Html::img(Yii::getAlias('@web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
                                . '</center></div>'
                                . '<div class="col-md-6">'
                                    . '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
                                    . '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
                                    . '... <br />'
                                    . Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success', 'id' => 'modalButton'])
                                    . '</p>'
                                . '</div>'
                            . '</div>'
                        . '</div>',
                'footer'=> '<center>Panel Footer</center>',
                'footerTitle' => true,
                Html::TYPE_DEFAULT,
            ])
            . '</div>';
    }

    Modal::begin([
        'header' => 'Testing',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

This is the main.js

$(function(){
    // Get the click of the button
    $('#modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

And this is my controller:

public function actionView($id)
    {
        return $this->render('view', [
            'model' => $this->findModel($id),
        ]);
    }

Thanks.

Upvotes: 0

Views: 186

Answers (1)

Jalali
Jalali

Reputation: 596

You assign an id to a button, but when you use a loop, your id is repeating id should be unique or you can use class for showing your modal

<?php
    foreach ($dataProvider->models as $myKandidat)
    {   
        echo '<div class="col-md-4">'
            . Html::panel([
                'body' => '<div class="panel-body ">'
                            . '<div class="row">'
                                . '<div class="col-md-6"><center>'
                                    . Html::img(Yii::getAlias('@web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
                                . '</center></div>'
                                . '<div class="col-md-6">'
                                    . '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
                                    . '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
                                    . '... <br />'
                                    . Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success modalButton'])
                                    . '</p>'
                                . '</div>'
                            . '</div>'
                        . '</div>',
                'footer'=> '<center>Panel Footer</center>',
                'footerTitle' => true,
                Html::TYPE_DEFAULT,
            ])
            . '</div>';
    }

    Modal::begin([
        'header' => 'Testing',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

in main.js

$(function(){
    // Get the click of the button
    $('.modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

Upvotes: 1

Related Questions