Same modal with different buttons

Hi,

I’m trying to call one modal:





	$('._addNew').click(function(event){

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

			.find('#modalAddParam2')

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

		});



with multiple buttons. This buttons are created automatically inside of the Gridview. The number of elements in the grid is always different, so the number of buttons is always different to.

This is how I call my js script in the gridview:


<tr>

<td><?= Html::button('+ New Param', ['value'=>Url::to(['parameter/add','id'=>$model->id]),'class' => 'btn btn-primary btn-sm _addNew']);?></td>

                                                               

<?php

        Modal::begin([

             'header'=> '<h4>New Param<h4>',

             'id' => 'modalal',

             //'class' =>'modalal',

             'size' =>  'modal-md-6',

             'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE],

                   ]);

             echo "<div id='modalAddParam2'></div>";

        Modal::end();

?>

</tr>

I know that the class must be the same for buttons, but when I create a class in the Modal widget, that doesn’t work!!

With the id, the Modal only works for the first button of the gridview.

Someone has already done something similar before?

Thanks a lot

okay you don’t need a class on the modal ID will do it, do you generate modal for each row in the gridview?

or is it just one modal on the page

Thanks a lot for your answer

for each row I generate the code above, and I call that js script

yea that won’t work, try this




$('._addNew').click(function(event){

	var modalId = $(this).data("modal");

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

    	.find('#modalAddParam2')

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

});


<tr>

	<td>

		<?= Html::button('+ New Param', ['value' => Url::to(['parameter/add', 'id' => $model->id]), 'class' => 'btn btn-primary btn-sm _addNew', 'data-modal' => 'modalal-'.$model->id]); ?>

	</td>

                                                               

<?php

    Modal::begin([

		'header'=> '<h4>New Param<h4>',

		'id' => 'modalal-'.$model->id,

		'size' =>  'modal-md-6',

		'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE],

    ]);

	echo "<div id='modalAddParam2'></div>";

    Modal::end();

?>

</tr>

That works now =)

Thank you very much alirz23.