yii2의 패널에서 모달을 사용할 수 없습니다

Question

yii2 프로젝트에서 패널을 사용하고 싶습니다. kartik-v에서 헬퍼를 다운로드합니다. 패널에서 버튼을 팝업 창이나 모달로 열려고하지만 문제가 있습니다. 첫 번째 패널에서만 작동하는 모달/팝업 창이 있지만 두 번째 패널, 세 번째 패널에서 버튼을 클릭 할 때 아무 것도 발생하지 않습니다. 뭐가 문제 야?

이

코드입니다 :

<?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(); 
    ?> 

이것은 main.js

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

입니다 그리고 이것은 내 컨트롤러 :

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

감사합니다.

Answer 1

당신은 버튼에 을 ID를 할당하지만 루프를 사용하는 경우, 귀하의 ID가 ID가 고유해야합니다 반복하거나 당신이 main.js

을에 모달

<?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(); 
    ?> 

을 표시하기위한 클래스를 사용할 수 있습니다

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