How to pass id or some other property of the record in gridview to boostrap modal?

Question

I stuck with the problem while implementing the share with files functionality in my site.

Here the code in gridview:

...
[
            'attribute' => 'description',
            'enableSorting' => false,
        ],
        [
            'format' => 'raw',
            'value' => function ($model) {
                return ($model->shared ? 
                        Html::a('<i style="color:red" class="glyphicon glyphicon-eye-open"></i>',['unshare', 'id'=>$model->id]) : 
                        Html::a('<i class="glyphicon glyphicon-eye-close"></i>',['share', 'id'=>$model->id]))
                        .'&nbsp;'.Html::a('<i class="glyphicon glyphicon-download-alt"></i>',['download', 'id'=>$model->id])
                        .'&nbsp;'.Html::a('<i class="glyphicon glyphicon-pencil"></i>',['update', 'id'=>$model->id])
                        .'&nbsp;'.Html::a('<i class="glyphicon glyphicon-trash"></i>',['delete', 'id'=>$model->id])
                        .'&nbsp;'.Html::a('<i class="glyphicon glyphicon-link"></i>', '#', ['data-toggle'=>'modal', 'data-target'=>'#modalShare'] );
            },
        ],

If I edit or view record I simply pass id in action like this:

Html::a('<i class="glyphicon glyphicon-pencil"></i>',['update', 'id'=>$model->id])

But I don't wanna go to another form located in another url path (e.g. update, view etc).

I wanna open boostrap modal and get access to the record id and name from the gridview inside modal. How to implement this?

I added:

Html::a('<i class="glyphicon glyphicon-link"></i>', '#', ['data-toggle'=>'modal', 'data-target'=>'#modalShare']

and this:

<!-- LinkModal -->
<div class="modal fade" id="modalShare" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Share with file <?=$searchModelAll->id ?> </h4>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

But I cannot get access to the id of the record. I undestand that writing <h4 class="modal-title" id="myModalLabel">Share with file <?=$searchModelAll->id ?> </h4> is incorrect but I have no other ideas. Please help me.

Here you can see what I am trying to do

Use `data` to transmit to modal, after you click a link use `jquery` get this `data` attr from the element which called the modal. — Serghei Leonenco, Sep 05 '21 at 01:56
@Serghei could you please provide the code itself how to write it? And in fact, then I must pass this id to yii2 activeform hidden input. How to write all of this? — Artur, Sep 05 '21 at 11:39
https://stackoverflow.com/questions/28358398/how-to-implement-yii2-modal-dialog-on-gridview-view-and-update-button . There are multiple articles and posts describing this. — Serghei Leonenco, Sep 05 '21 at 11:59

score 0 · Answer 1 · answered Sep 09 '21 at 00:57

Because you have a large number of links in Gridview that point to the 'bootstrap modal', it is best to use Client Side Programming such as JavaScript or jQuery.

Html::a('<i class="glyphicon glyphicon-link"></i>',false,  ['value' => $model->id, 'class' => 'modalsubmit'])

In Jquery:

$(function(){
      $(document).on('click', '.modalsubmit', function(){
        if ($('#modalShare').data('bs.modal').isShown) {
            $('#modalShare').find('#myModalLabel')   //modalContent
            .load($(this).attr('value'));
        } else {
            $('#modalShare').modal('show')
            .find('#myModalLabel')
            .load($(this).attr('value'));
        }
    });
});

How to pass id or some other property of the record in gridview to boostrap modal?

1 Answers1

In Jquery: