loveorigami / yii2-modal-ajax

A wrapper around Yii2 Bootstrap Modal for using an ActiveForm via AJAX inside.
MIT License
50 stars 30 forks source link

Send parameters from button to modal-ajax #32

Open vkponomarev opened 4 years ago

vkponomarev commented 4 years ago

Hello, i need to put one parameter from button to widget

data-video="fbnSR-KBOiE"

to 'param' => 42 like this 'param' => fbnSR-KBOiE

How can i do this?

echo ModalAjax::widget([ 'id' => 'showVideo', 'header' => 'Create Company', //'toggleButton' => [ // 'label' => 'New Company', // 'class' => 'btn btn-primary pull-right' //], 'url' => \yii\helpers\Url::toRoute(['youtube/index', 'param' => 42]), // Ajax view with form to load 'ajaxSubmit' => true, // Submit the contained form as ajax, true by default // ... any other yii2 bootstrap modal option you need ]);

?>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#showVideo" data-video="fbnSR-KBOiE" data-backdrop="false"> show video

vangogogo commented 3 years ago

I have same scenario,do you have solution yet?

vkponomarev commented 3 years ago

Hi, i did it with js and jquery: you can look here how it done https://flowlez.com/ru/albums/towards-thee-infinite-beat-113785/

<span data-url="rrJvkBP_mcQ" onclick="sYM(this)"></span>

<div class="modal fade" id="yM" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    let youtubeModal = $('#yM').modal({'show': false});
    youtubeModal.on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget);
        let url = button.data('url');
        $.ajax({
            url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',
            type: 'post',
            data: {url: url},
            success(response) {
                $('.modal-body').html(response);
            }
        });
    });
    function sYM(trigger) {
        youtubeModal.modal('show', $(trigger));
    }
</script>
class YoutubeController extends Controller
{

    public function actionIndex()
    {

        if(\Yii::$app->request->isAjax){

            $youtubeUrl = \Yii::$app->request->post('url');
            //$youtubeUrl = explode('=', $youtubeUrl);

            return $this->renderAjax('index', [
                'youtubeUrl'  => $youtubeUrl,
            ]);
        }

    }

}
    <script src="//www.youtube.com/player_api"></script>

    <iframe id="ytplayer" type="text/html" width="100%" height="100%"
            src="https://www.youtube.com/embed/<?=$youtubeUrl?>?autoplay=1&enablejsapi=1"
            frameborder="0" allow="autoplay" allowfullscreen></iframe>
vangogogo commented 3 years ago

this can works,but in this case we cann't use this package any more..