List of buttons to modal window with foreach in Yii2

Yii 2.0 General Discussions
1

Hi I want to make some modal window in yii2. So I tried to do link with id of model and then display this model in modal. This is my code in js:


$(function(){

    $('#modalButton').click(function(){

        $('#modal').modal('show')

                .find('#modalContent')

                .load($(this).attr('value'));

    });

    });

And in php in index:


<?php $counter=0; ?>

    <div class="archive-post-items">

<?php foreach ($posts as $p): ?>

    <div class="archive-post-item">

<?php  $counter++; ?>

   <p><b><?= $counter . '. ' . Html::button($p['Title'], ['value'=>Url::to(['post', 'id' => $p['Id']]), 'id'=>'modalButton']); ?></b></p>

 <p> <?= $p['CreatedAt']; ?></p>

    </div>

<?php endforeach; ?>

        </div>


<?php 

Modal::begin([

    'id' => 'modal',

    'size'=>'modal-lg'

]);


echo "<div class='blog-post-view' id='modalContent'></div>";


Modal::end();

?>

And I display context in post.php where i give id:


<div class="blog-post-view" id="modalContent">

but this display me only first button in modal. So when i click on first button all is ok but rest of my buttons are no clickable, nothing happneded when i clicked. I think i do some wrong but I not sure where. Can anyone see my mistake?

In the oder side when i used this link:


<p><b><?= $counter . '. ' . Html::a($p['Title'], Url::to(['post', 'id' => $p['Id'], 'year' => $year]), ['id'=>'modalButton']); ?></b></p>

it render all of my links on other site page, not in modal window but in new card without css styles. I would rather to fix this second button to work. Does someone see where i made mistake?

2

$(’#modalButton’) is not an appropriate selector since you have many modal buttons.

I’m not very sure, but you may try this:


$(function(){

    $('.modalButton').click(function(){

        $('#modal').modal('show')

                .find('#modalContent')

                .load($(this).attr('value'));

    });

    });







...

   <p><b><?= $counter . '. ' . Html::button($p['Title'], ['value'=>Url::to(['post', 'id' => $p['Id']]), 'class'=>'modalButton']); ?></b></p>